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;
+ }
+}