Rollback scrollbar to native Safari
General settings layout
This commit is contained in:
parent
22efc8e833
commit
1e49fd10f0
@ -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, () => {
|
||||
|
@ -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');
|
||||
|
@ -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) {
|
||||
|
@ -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', `<div class="radio-field-main-subtitle">${subtitle}</div>`);
|
||||
}
|
||||
|
||||
main.append(caption); */
|
||||
}
|
||||
|
||||
label.append(input, main);
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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<typeof CheckboxField>;
|
||||
public radioField: ReturnType<typeof RadioField>;
|
||||
|
||||
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() {
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -93,4 +93,30 @@ export function safeReplaceArrayInObject<K>(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]);
|
||||
}
|
||||
}
|
||||
}
|
@ -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:
|
||||
}; */
|
||||
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 = ['dialogs', 'allDialogsLoaded', 'chats',
|
||||
'users', 'messages', 'contactsList',
|
||||
'updates', 'filters', 'maxSeenMsgId',
|
||||
'stateCreatedTime', 'recentEmoji', 'topPeers',
|
||||
'recentSearch', 'stickerSets', 'version',
|
||||
'authState', 'hiddenPinnedMessages'
|
||||
] as any as Array<keyof State>;
|
||||
const ALL_KEYS = Object.keys(STATE_INIT) as any as Array<keyof State>;
|
||||
|
||||
const REFRESH_KEYS = ['dialogs', 'allDialogsLoaded', 'messages', 'contactsList', 'stateCreatedTime',
|
||||
'updates', 'maxSeenMsgId', 'filters', 'topPeers'] as any as Array<keyof State>;
|
||||
@ -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<T extends keyof State>(key: T, value: State[T]) {
|
||||
this.state[key] = value;
|
||||
}
|
||||
|
@ -126,6 +126,10 @@ Utility Classes
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
/* .flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
} */
|
||||
}
|
||||
//}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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"] {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
&-content {
|
||||
padding: 0 1.5rem;
|
||||
@include respond-to(not-handhelds) {
|
||||
margin: 0 .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
padding: 1rem .875rem;
|
||||
}
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
padding: 0 1rem;
|
||||
.btn-primary, .checkbox-field, .radio-field {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.tgico-photo:before {
|
||||
margin-left: -2px;
|
||||
margin-right: 2.125rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
@ -1,20 +1,45 @@
|
||||
.scrollable::-webkit-scrollbar {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-thumb {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
::-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
|
||||
}
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user