diff --git a/src/components/chat/selection.ts b/src/components/chat/selection.ts index 78363fee..e2ea0ab6 100644 --- a/src/components/chat/selection.ts +++ b/src/components/chat/selection.ts @@ -299,7 +299,7 @@ export default class ChatSelection { this.selectionCountEl.classList.add('selection-container-count'); if(this.chat.type === 'scheduled') { - this.selectionSendNowBtn = Button('btn-primary btn-transparent selection-container-send', {icon: 'send2'}); + this.selectionSendNowBtn = Button('btn-primary btn-transparent btn-short text-bold selection-container-send', {icon: 'send2'}); this.selectionSendNowBtn.append('Send Now'); this.listenerSetter.add(this.selectionSendNowBtn, 'click', () => { new PopupSendNow(this.bubbles.peerId, [...this.selectedMids], () => { @@ -307,7 +307,7 @@ export default class ChatSelection { }) }); } else { - this.selectionForwardBtn = Button('btn-primary btn-transparent selection-container-forward', {icon: 'forward'}); + this.selectionForwardBtn = Button('btn-primary btn-transparent text-bold selection-container-forward', {icon: 'forward'}); this.selectionForwardBtn.append('Forward'); this.listenerSetter.add(this.selectionForwardBtn, 'click', () => { new PopupForward(this.bubbles.peerId, [...this.selectedMids], () => { @@ -316,7 +316,7 @@ export default class ChatSelection { }); } - this.selectionDeleteBtn = Button('btn-primary btn-transparent danger selection-container-delete', {icon: 'delete'}); + this.selectionDeleteBtn = Button('btn-primary btn-transparent danger text-bold selection-container-delete', {icon: 'delete'}); this.selectionDeleteBtn.append('Delete'); this.listenerSetter.add(this.selectionDeleteBtn, 'click', () => { new PopupDeleteMessages(this.bubbles.peerId, [...this.selectedMids], this.chat.type, () => { diff --git a/src/components/checkbox.ts b/src/components/checkbox.ts index a26489b6..7b0202b7 100644 --- a/src/components/checkbox.ts +++ b/src/components/checkbox.ts @@ -1,4 +1,7 @@ -const CheckboxField = (text: string, name: string, round = false) => { +import appStateManager from "../lib/appManagers/appStateManager"; +import { getDeepProperty } from "../helpers/object"; + +const CheckboxField = (text: string, name: string, round = false, stateKey?: string) => { const label = document.createElement('label'); label.classList.add(round ? 'checkbox-field-round' : 'checkbox-field'); @@ -6,6 +9,16 @@ const CheckboxField = (text: string, name: string, round = false) => { input.type = 'checkbox'; input.id = 'input-' + name; + if(stateKey) { + appStateManager.getState().then(state => { + input.checked = getDeepProperty(state, stateKey); + }); + + input.addEventListener('change', () => { + appStateManager.setByKey(stateKey, input.checked); + }); + } + const span = document.createElement('span'); span.classList.add('checkbox-caption'); if(round) span.classList.add('tgico-check'); diff --git a/src/components/popups/createPoll.ts b/src/components/popups/createPoll.ts index 553b12b0..cc90a0bf 100644 --- a/src/components/popups/createPoll.ts +++ b/src/components/popups/createPoll.ts @@ -296,7 +296,7 @@ export default class PopupCreatePoll extends PopupElement { const radioField = RadioField('', 'question'); radioField.main.append(questionField.container); - radioField.main.addEventListener('click', cancelEvent); + questionField.input.addEventListener('click', cancelEvent); radioField.label.classList.add('hidden-widget'); radioField.input.disabled = true; if(!this.quizCheckboxField.input.checked) { diff --git a/src/components/radioField.ts b/src/components/radioField.ts index 2852a68a..f9efd666 100644 --- a/src/components/radioField.ts +++ b/src/components/radioField.ts @@ -1,4 +1,7 @@ -const RadioField = (text: string, name: string) => { +import appStateManager from "../lib/appManagers/appStateManager"; +import { getDeepProperty } from "../helpers/object"; + +const RadioField = (text: string, name: string, value?: string, stateKey?: string) => { const label = document.createElement('label'); label.classList.add('radio-field'); @@ -6,9 +9,36 @@ const RadioField = (text: string, name: string) => { input.type = 'radio'; input.id = input.name = 'input-radio-' + name; + if(value) { + input.value = value; + + if(stateKey) { + appStateManager.getState().then(state => { + input.checked = getDeepProperty(state, stateKey) === value; + }); + + input.addEventListener('change', () => { + appStateManager.setByKey(stateKey, value); + }); + } + } + const main = document.createElement('div'); main.classList.add('radio-field-main'); - main.innerText = text; + + if(text) { + main.innerHTML = text; + /* const caption = document.createElement('div'); + caption.classList.add('radio-field-main-caption'); + caption.innerHTML = text; + + if(subtitle) { + label.classList.add('radio-field-with-subtitle'); + caption.insertAdjacentHTML('beforeend', `
${subtitle}
`); + } + + main.append(caption); */ + } label.append(input, main); diff --git a/src/components/scrollable.ts b/src/components/scrollable.ts index 418d5078..f9461971 100644 --- a/src/components/scrollable.ts +++ b/src/components/scrollable.ts @@ -139,12 +139,12 @@ export default class Scrollable extends ScrollableBase { constructor(el: HTMLElement, logPrefix = '', public onScrollOffset = 300, withPaddingContainer?: boolean) { super(el, logPrefix); - if(withPaddingContainer) { + /* if(withPaddingContainer) { this.padding = document.createElement('div'); this.padding.classList.add('scrollable-padding'); Array.from(this.container.children).forEach(c => this.padding.append(c)); this.container.append(this.padding); - } + } */ this.container.classList.add('scrollable-y'); this.setListeners(); diff --git a/src/components/sidebarLeft/tabs/generalSettings.ts b/src/components/sidebarLeft/tabs/generalSettings.ts index 60cd01f2..c12ebf74 100644 --- a/src/components/sidebarLeft/tabs/generalSettings.ts +++ b/src/components/sidebarLeft/tabs/generalSettings.ts @@ -2,6 +2,9 @@ import { SliderSuperTab } from "../../slider" import { AppSidebarLeft } from ".."; import RangeSelector from "../../rangeSelector"; import { clamp } from "../../../helpers/number"; +import Button from "../../button"; +import CheckboxField from "../../checkbox"; +import RadioField from "../../radioField"; export class RangeSettingSelector { public container: HTMLDivElement; @@ -53,7 +56,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTab { const hr = document.createElement('hr'); const h2 = document.createElement('div'); - h2.classList.add('sidebar-left-section-name'); + h2.classList.add('sidebar-left-h2', 'sidebar-left-section-name'); h2.innerHTML = name; const content = document.createElement('div'); @@ -71,14 +74,121 @@ export default class AppGeneralSettingsTab extends SliderSuperTab { const container = generateSection('Settings'); const range = new RangeSettingSelector('Message Text Size', 1, 16, 12, 20); + + const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'Chat Background'}); + + const animationsCheckboxField = CheckboxField('Enable Animations', 'animations', false, 'settings.animationsEnabled'); - container.append(range.container); + container.append(range.container, chatBackgroundButton, animationsCheckboxField.label); } - generateSection('Keyboard'); - generateSection('Auto-Download Media'); - generateSection('Auto-Play Media'); - generateSection('Stickers'); + { + const container = generateSection('Keyboard'); + + class Row { + public container: HTMLElement; + public title: HTMLDivElement; + public subtitle: HTMLElement; + + public checkboxField: ReturnType; + public radioField: ReturnType; + + constructor(options: Partial<{ + icon: string, + subtitle: string, + radioField: Row['radioField'], + checkboxField: Row['checkboxField'], + title: string, + }> = {}) { + this.container = document.createElement('div'); + this.container.classList.add('row'); + + this.subtitle = document.createElement('div'); + this.subtitle.classList.add('row-subtitle'); + if(options.subtitle) { + this.subtitle.innerHTML = options.subtitle; + } + + let havePadding = false; + if(options.radioField || options.checkboxField) { + havePadding = true; + if(options.radioField) { + this.radioField = options.radioField; + this.container.append(this.radioField.label); + } + + if(options.checkboxField) { + this.checkboxField = options.checkboxField; + this.container.append(this.checkboxField.label); + } + } else { + if(options.icon) { + havePadding = true; + this.container.classList.add('tgico-', options.icon); + } + + if(options.title) { + this.title = document.createElement('div'); + this.title.classList.add('row-title'); + this.title.innerHTML = options.title; + this.container.append(this.title); + } + } + + if(havePadding) { + this.container.classList.add('row-with-padding'); + } + + this.container.append(this.subtitle); + } + + + } + + const form = document.createElement('form'); + + const enterRow = new Row({ + radioField: RadioField('Send by Enter', 'send-shortcut', 'enter', 'settings.sendShortcut'), + subtitle: 'New line by Shift + Enter', + }); + + const ctrlEnterRow = new Row({ + radioField: RadioField('Send by Ctrl + Enter', 'send-shortcut', 'ctrlEnter', 'settings.sendShortcut'), + subtitle: 'New line by Enter', + }); + + form.append(enterRow.container, ctrlEnterRow.container); + container.append(form); + } + + { + const container = generateSection('Auto-Download Media'); + + const contactsCheckboxField = CheckboxField('Contacts', 'contacts', false, 'settings.autoDownload.contacts'); + const privateCheckboxField = CheckboxField('Private Chats', 'private', false, 'settings.autoDownload.private'); + const groupsCheckboxField = CheckboxField('Group Chats', 'groups', false, 'settings.autoDownload.groups'); + const channelsCheckboxField = CheckboxField('Channels', 'channels', false, 'settings.autoDownload.channels'); + + container.append(contactsCheckboxField.label, privateCheckboxField.label, groupsCheckboxField.label, channelsCheckboxField.label); + } + + { + const container = generateSection('Auto-Play Media'); + + const gifsCheckboxField = CheckboxField('GIFs', 'gifs', false, 'settings.autoPlay.gifs'); + const videosCheckboxField = CheckboxField('Videos', 'videos', false, 'settings.autoPlay.videos'); + + container.append(gifsCheckboxField.label, videosCheckboxField.label); + } + + { + const container = generateSection('Stickers'); + + const suggestCheckboxField = CheckboxField('Suggest Stickers by Emoji', 'suggest', false, 'settings.stickers.suggest'); + const loopCheckboxField = CheckboxField('Loop Animated Stickers', 'loop', false, 'settings.stickers.loop'); + + container.append(suggestCheckboxField.label, loopCheckboxField.label); + } } onOpen() { diff --git a/src/helpers/dom.ts b/src/helpers/dom.ts index 0b9fc232..dbddfe59 100644 --- a/src/helpers/dom.ts +++ b/src/helpers/dom.ts @@ -671,3 +671,13 @@ export async function getFilesFromEvent(e: ClipboardEvent | DragEvent, onlyTypes return files; } + +export function radiosHandleChange(inputs: HTMLInputElement[], onChange: (value: string) => void) { + inputs.forEach(input => { + input.addEventListener('change', () => { + if(input.checked) { + onChange(input.value); + } + }); + }); +} diff --git a/src/helpers/object.ts b/src/helpers/object.ts index 8b7c7585..0f801c63 100644 --- a/src/helpers/object.ts +++ b/src/helpers/object.ts @@ -93,4 +93,30 @@ export function safeReplaceArrayInObject(key: K, wasObject: any, newObject: a export function isObject(object: any) { return typeof(object) === 'object' && object !== null; +} + +export function getDeepProperty(object: any, key: string) { + const splitted = key.split('.'); + let o: any = object; + splitted.forEach(key => { + // @ts-ignore + o = o[key]; + }); + + return o; +} + +export function setDeepProperty(object: any, key: string, value: any) { + const splitted = key.split('.'); + getDeepProperty(object, splitted.slice(0, -1).join('.'))[splitted.pop()] = value; +} + +export function validateInitObject(initObject: any, currentObject: any) { + for(const i in initObject) { + if(typeof(currentObject[i]) !== typeof(initObject[i])) { + currentObject[i] = copy(initObject[i]); + } else if(isObject(initObject[i])) { + validateInitObject(initObject[i], currentObject[i]); + } + } } \ No newline at end of file diff --git a/src/lib/appManagers/appStateManager.ts b/src/lib/appManagers/appStateManager.ts index cf6dca3a..6aaa509c 100644 --- a/src/lib/appManagers/appStateManager.ts +++ b/src/lib/appManagers/appStateManager.ts @@ -10,6 +10,7 @@ import type { AppChatsManager } from './appChatsManager'; import type { AuthState } from '../../types'; import type FiltersStorage from '../storages/filters'; import type DialogsStorage from '../storages/dialogs'; +import { copy, setDeepProperty, isObject, validateInitObject } from '../../helpers/object'; const REFRESH_EVERY = 24 * 60 * 60 * 1000; // 1 day const STATE_VERSION = App.version; @@ -35,10 +36,28 @@ type State = Partial<{ stickerSets: AppStickersManager['stickerSets'], version: typeof STATE_VERSION, authState: AuthState, - hiddenPinnedMessages: {[peerId: string]: number} + hiddenPinnedMessages: {[peerId: string]: number}, + settings: { + sendShortcut: 'enter' | 'ctrlEnter', + animationsEnabled: boolean, + autoDownload: { + contacts: boolean + private: boolean + groups: boolean + channels: boolean + }, + autoPlay: { + gifs: boolean, + videos: boolean + }, + stickers: { + suggest: boolean, + loop: boolean + } + } }>; -/* const STATE_INIT: State = { +const STATE_INIT: State = { dialogs: [], allDialogsLoaded: {}, chats: {}, @@ -48,22 +67,37 @@ type State = Partial<{ updates: {}, filters: {}, maxSeenMsgId: 0, - stateCreatedTime: 0, + stateCreatedTime: Date.now(), recentEmoji: [], topPeers: [], recentSearch: [], stickerSets: {}, - version: '', - authState: -}; */ - -const ALL_KEYS = ['dialogs', 'allDialogsLoaded', 'chats', - 'users', 'messages', 'contactsList', - 'updates', 'filters', 'maxSeenMsgId', - 'stateCreatedTime', 'recentEmoji', 'topPeers', - 'recentSearch', 'stickerSets', 'version', - 'authState', 'hiddenPinnedMessages' -] as any as Array; + version: STATE_VERSION, + authState: { + _: 'authStateSignIn' + }, + hiddenPinnedMessages: {}, + settings: { + sendShortcut: 'enter', + animationsEnabled: true, + autoDownload: { + contacts: true, + private: true, + groups: true, + channels: true + }, + autoPlay: { + gifs: true, + videos: true + }, + stickers: { + suggest: true, + loop: true + } + } +}; + +const ALL_KEYS = Object.keys(STATE_INIT) as any as Array; const REFRESH_KEYS = ['dialogs', 'allDialogsLoaded', 'messages', 'contactsList', 'stateCreatedTime', 'updates', 'maxSeenMsgId', 'filters', 'topPeers'] as any as Array; @@ -96,32 +130,29 @@ export class AppStateManager extends EventListenerBase<{ if(value !== false) { // @ts-ignore state[key] = value; + } else { + // @ts-ignore + state[key] = copy(STATE_INIT[key]); } }); const time = Date.now(); if(state) { - if(state.version != STATE_VERSION) { - state = {}; - } else if(((state.stateCreatedTime || 0) + REFRESH_EVERY) < time/* && false */) { + if(state.version !== STATE_VERSION) { + state = copy(STATE_INIT); + } else if((state.stateCreatedTime + REFRESH_EVERY) < time/* && false */) { this.log('will refresh state', state.stateCreatedTime, time); REFRESH_KEYS.forEach(key => { - delete state[key]; + // @ts-ignore + state[key] = copy(STATE_INIT[key]); }); - //state = {}; } } - this.state = state || {}; - this.state.chats = state.chats || {}; - this.state.users = state.users || {}; - this.state.hiddenPinnedMessages = this.state.hiddenPinnedMessages || {}; + validateInitObject(STATE_INIT, state); + + this.state = state; this.state.version = STATE_VERSION; - - // ??= doesn't compiles - if(!this.state.hasOwnProperty('stateCreatedTime')) { - this.state.stateCreatedTime = Date.now(); - } this.log('state res', state); @@ -132,8 +163,6 @@ export class AppStateManager extends EventListenerBase<{ // ! Warning ! DON'T delete this this.state.authState = {_: 'authStateSignedIn'}; rootScope.broadcast('user_auth', typeof(auth) !== 'number' ? (auth as any).id : auth); // * support old version - } else if(!this.state.authState) { - this.state.authState = {_: 'authStateSignIn'}; } //console.timeEnd('load state'); @@ -175,6 +204,10 @@ export class AppStateManager extends EventListenerBase<{ //this.log('saveState: storage set time:', performance.now() - perf); } + public setByKey(key: string, value: any) { + setDeepProperty(this.state, key, value); + } + public pushToState(key: T, value: State[T]) { this.state[key] = value; } diff --git a/src/scss/components/_global.scss b/src/scss/components/_global.scss index 20302526..d8bd0762 100644 --- a/src/scss/components/_global.scss +++ b/src/scss/components/_global.scss @@ -126,6 +126,10 @@ Utility Classes transform: translate(-50%, -50%); } +.text-bold { + font-weight: 500 !important; +} + /* .flex-grow { flex-grow: 1; } diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 7e4ed86c..da98dc3e 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -244,6 +244,7 @@ padding: 0 .875rem; //width: auto; text-transform: capitalize; + font-weight: normal; html.no-touch &:hover { background-color: var(--color-gray-hover); @@ -253,6 +254,10 @@ &:before { color: #707579; font-size: 1.5rem; + margin-right: 2rem; + } + + &.btn-short:before { margin-right: 1rem; } } diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index cd0b56ee..c5f60a2b 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -937,9 +937,9 @@ $chat-helper-size: 39px; flex-direction: column; justify-content: flex-end; */ // * scrollbar takes some width, don't need to set padding for iOS - html.is-safari:not(.is-ios) & { + /* html.is-safari:not(.is-ios) & { padding-left: 6px; - } + } */ } //} diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index 6604f739..b1ba963f 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -76,9 +76,9 @@ margin: 0 8px; overflow: hidden; - html.is-safari & { + /* html.is-safari & { margin-right: 3px; - } + } */ @include respond-to(handhelds) { padding: 9px 12px 0 9px !important; diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss index 4ef9898e..a0e1d90f 100644 --- a/src/scss/partials/_checkbox.scss +++ b/src/scss/partials/_checkbox.scss @@ -5,6 +5,7 @@ padding: 0 1.125rem; /* font-weight: 500; */ position: relative; + cursor: pointer; @include respond-to(handhelds) { margin-bottom: 27px; @@ -54,13 +55,13 @@ } .radio-field { - display: block; position: relative; - padding-left: 3.5rem; text-align: left; margin: 1.25rem 0; line-height: 1.5rem; cursor: pointer; + display: flex; + align-items: center; &.hidden-widget { cursor: default; @@ -86,12 +87,16 @@ } } + // ! can't use &-main here, check popup create poll .radio-field-main { + padding-left: 3.5rem; + position: relative; + &::before, &::after { content: ''; display: block; position: absolute; - left: .25rem; + left: 0; top: 50%; width: 1.25rem; height: 1.25rem; @@ -107,7 +112,7 @@ } &::after { - left: .5625rem; + left: .3125rem; width: .625rem; height: .625rem; border-radius: 50%; @@ -116,18 +121,21 @@ transition: opacity .1s ease; } - /* .label { - display: block; - word-break: break-word; - } - - .subLabel { - display: block; - font-size: 0.875rem; - line-height: 1rem; - color: var(--color-text-secondary); + /* &-subtitle { + color: #707579 !important; + font-size: 14px !important; } */ } + + /* &-with-subtitle { + .radio-field-main { + margin-bottom: 1.5rem; + + &-subtitle { + margin-bottom: -1.5rem; + } + } + } */ } [type="checkbox"], [type="radio"] { diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index b150f645..18619df1 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -274,6 +274,7 @@ video::-webkit-media-controls-enclosure { .progress-line { --height: 5px; --border-radius: 6px; + border-radius: var(--border-radius); height: var(--height); position: relative; cursor: pointer; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 0e88338c..a6062c3e 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -470,7 +470,7 @@ } .new-group-members { - padding: 1.5rem 0 0.4375rem; + padding: 1.5rem 0 .4375rem; .search-group__name { text-transform: capitalize; @@ -481,41 +481,25 @@ .profile { &-button { display: flex; - padding: 1.125rem .625rem; - height: 3.5rem; - line-height: 1.4; - border-radius: .625rem; - overflow: hidden; + padding: 0 1rem; font-weight: normal; text-transform: unset; + margin: 0 0 2px 0; @include respond-to(handhelds) { - padding: .75rem .625rem; height: 48px; - margin: 0 0 2px 0; border-radius: 0; } - - &:before { - font-size: 24px; - color: #707579; - margin-left: .375rem; - margin-right: 2rem; - } - - p { - padding-left: 2rem; - user-select: none; - } } &-buttons { - margin-top: 1.125rem; + margin-top: 1.1875rem; width: 100%; padding: 0 .4375rem; @include respond-to(handhelds) { margin-top: 0.6875rem; + padding: 0; } } } @@ -534,10 +518,8 @@ } .sidebar-left-h2 { - color: #707579; padding: 0 1.438rem; padding-bottom: 1.5rem; - font-weight: 500; } hr { @@ -568,12 +550,7 @@ } .sidebar-left-h2 { - color: #707579; - font-size: 15px; - // padding-top: 7px; - // padding-bottom: 15px; padding: 7px 24px 15px 24px; - font-weight: 500; @include respond-to(handhelds) { padding: 7px 16px 15px 16px; @@ -712,7 +689,6 @@ display: flex; padding: 0 1.5rem; overflow: hidden; - font-weight: normal; height: 50px; border-radius: 0; @@ -720,24 +696,8 @@ padding: 0 1rem; } - p { - user-select: none; - margin-left: 32px; - font-size: 16px; - flex: 1 1 auto; - } - - &.blue, &.blue:before { - color: #50a2e9; - } - - &:first-child { - cursor: pointer; - } - &:before { color: #797d82; - margin-right: 2rem; } } @@ -773,9 +733,6 @@ .included-chatlist-container { .sidebar-left-h2 { - color: #707579; - font-size: 15px; - font-weight: 500; padding: 6px 24px 8px 24px; @include respond-to(handhelds) { @@ -880,28 +837,73 @@ } } -.sidebar-left-section { - padding: .5rem 0 1rem; +.sidebar-left { + &-section { + padding: .5rem 0 1rem; + + &-content { + margin: 0 0.125rem; + + @include respond-to(not-handhelds) { + margin: 0 .625rem; + } + } + + &-name { + padding: 1rem .875rem; + } + + .btn-primary, .checkbox-field, .radio-field { + margin: 0; + } + + &:first-child { + padding-top: 0; + } - &-content { - padding: 0 1.5rem; + .tgico-photo:before { + margin-left: -2px; + margin-right: 2.125rem; + } - @include respond-to(handhelds) { - padding: 0 1rem; + .checkbox-field { + display: flex; + align-items: center; + height: 54px; + } + + .checkbox-field { + padding: 0 .875rem; + } + + .radio-field { + &-main { + } } } - &-name { + &-h2 { color: #707579; - font-size: 15px; + font-size: 16px; font-weight: 500; } } +.general-settings-container { + user-select: none; +} + .range-setting-selector { + padding: 1rem .875rem; + &-details { display: flex; justify-content: space-between; + margin-bottom: 1rem; + } + + &-value { + color: #707579; } .progress-line { diff --git a/src/scss/partials/_scrollable.scss b/src/scss/partials/_scrollable.scss index 7993b0d7..ba6f5a21 100644 --- a/src/scss/partials/_scrollable.scss +++ b/src/scss/partials/_scrollable.scss @@ -1,20 +1,45 @@ -.scrollable::-webkit-scrollbar { - width: 0; - height: 0; -} - -.scrollable::-webkit-scrollbar-thumb { - width: 0; - height: 0; +html:not(.is-safari):not(.is-ios) { + .scrollable::-webkit-scrollbar { + width: 0; + height: 0; + opacity: 0; // for safari + width: .375rem; + } + + .scrollable::-webkit-scrollbar-thumb { + width: 0; + height: 0; + } + + ::-webkit-scrollbar-thumb { + opacity: 0; + transition: .2s ease-in-out; + } + + ::-webkit-scrollbar-button { + width: 0; + height: 0; + display: none; + } + + ::-webkit-scrollbar-corner { + background-color: transparent; + } + + .scrollable:hover::-webkit-scrollbar { + opacity: 1; // for safari + } + + .scrollable:hover::-webkit-scrollbar-thumb { + height: 200px; + border-radius: $border-radius-medium; + background-color: rgba(0, 0, 0, .2); + opacity: 1; + } } -::-webkit-scrollbar-button { - width: 0; - height: 0; - display: none; -} -::-webkit-scrollbar-corner { - background-color: transparent; +.scrollable-x::-webkit-scrollbar { + display: none; // for safari iOS } .scrollable { @@ -23,11 +48,7 @@ overflow-y: hidden; overflow-x: hidden; max-height: 100%; - //position: relative; transform: translateZ(0); - //will-change: transform; - /* transform: translateZ(0); - -webkit-transform: translateZ(0); */ //@include respond-to(not-handhelds) { position: absolute; @@ -37,8 +58,6 @@ right: 0px; //} - /* display: flex; - flex-direction: column; */ -webkit-overflow-scrolling: touch; &.scrollable-x { @@ -63,104 +82,7 @@ height: 100%; } - html.is-safari &-padding { + /* html.is-safari &-padding { margin-right: -6px; - } - - /* &-sentinel { - position: relative; - left: 0; - height: 1px; - min-height: 1px; - background-color: transparent; - width: 1px; - min-width: 1px; - } */ - - /* &.scrollable-x ~ .scrollbar-thumb { - top: auto; - right: auto; - width: auto; - height: 4px; - bottom: 0px; - } - - .scroll-padding { - flex: 0 0 auto; - - &:first-child + * { - flex: 1 1 auto; - } } */ -} - -/* .scrollbar-thumb { - position: absolute; - top: 0; - right: 2px; - width: 4px; - //margin-left: 2px; - background-color: #000; - //cursor: grab; - cursor: default; - opacity: 0; - transition-property: opacity; - transition-duration: .2s; - transition-timing-function: ease-in-out; - - display: none; - - border-radius: $border-radius; - z-index: 2; -} - -:hover > .scrollbar-thumb { - opacity: .4; -} */ - - - - - - - -// BROWSER SCROLL -.scrollable-y::-webkit-scrollbar { - width: .375rem; - opacity: 0; // for safari - //height: 200px; -} - -.scrollable:hover::-webkit-scrollbar { - opacity: 1; // for safari -} - -/* div.scrollable-y::-webkit-scrollbar-thumb { - border: 2px solid rgba(0, 0, 0, 0); - background-clip: padding-box; -} */ - -::-webkit-scrollbar-thumb { - opacity: 0; - transition: .2s ease-in-out; -} - -.scrollable:hover::-webkit-scrollbar-thumb { - height: 200px; - border-radius: $border-radius-medium; - background-color: rgba(0, 0, 0, 0.2); - opacity: 1; -} - -::-webkit-scrollbar-button { - width: 0; - height: 0; - display: none; -} -::-webkit-scrollbar-corner { - background-color: transparent; -} - -.scrollable-x::-webkit-scrollbar { - display: none; // for safari iOS } \ No newline at end of file diff --git a/src/scss/partials/popups/_createPoll.scss b/src/scss/partials/popups/_createPoll.scss index 3e7c187d..b50e68e3 100644 --- a/src/scss/partials/popups/_createPoll.scss +++ b/src/scss/partials/popups/_createPoll.scss @@ -11,6 +11,16 @@ .radio-field { margin: 0; + + .radio-field-main { + &::before { + left: .25rem; + } + + &::after { + left: .5625rem; + } + } } .hidden-widget, .radio-field:first-child:last-child { @@ -20,8 +30,13 @@ } } - .input-field { + .poll-create-questions > label { margin-top: 25px; + } + + .input-field { + margin-top: 0; + .btn-icon { position: absolute; right: .5rem; @@ -56,7 +71,7 @@ } hr { - border-bottom: 1px solid #edeff1; + border-top: 1px solid #edeff1; } .subtitle { diff --git a/src/scss/style.scss b/src/scss/style.scss index 79a1b071..5bc0804b 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -366,6 +366,10 @@ input, textarea { color: $color-error!important; } +.blue, .blue:before { + color: $color-blue!important; +} + .bg-warning { background: #fed85a; } @@ -451,8 +455,9 @@ input, textarea { hr { width: 100%; border: none; - border-bottom: 1px solid #DADCE0; - margin: 0 0 8px; + border-top: 1px solid #DADCE0; + margin: 0; + padding-bottom: .5rem; } .user-title, b/* , .user-last-message b */ { @@ -1103,3 +1108,22 @@ middle-ellipsis-element { background-color: #c5c9cc; } } + +.row { + padding-left: 4.375rem; + min-height: 3.375rem; + margin-top: 1rem; + + .radio-field { + &-main { + padding-left: 3.375rem; + margin-left: -3.375rem; + } + } + + &-subtitle { + color: #707579 !important; + font-size: 14px !important; + line-height: 1.6; + } +}