r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor checkbox

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-02-01 05:07:44 +02:00
parent 4979729041
commit 444ea1f446
14 changed files with 123 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/button.ts
View File

@ -1,6 +1,6 @@
import { ripple } from "./ripple";
const Button = (className: string, options: Partial<{noRipple: true, onlyMobile: true, icon: string, rippleSquare: true, text: string}> = {}) => {
const Button = (className: string, options: Partial<{noRipple: true, onlyMobile: true, icon: string, rippleSquare: true, text: string, disabled: boolean}> = {}) => {
const button = document.createElement('button');
button.className = className + (options.icon ? ' tgico-' + options.icon : '');
@ -16,6 +16,10 @@ const Button = (className: string, options: Partial<{noRipple: true, onlyMobile:
button.classList.add('only-handhelds');
}
if(options.disabled) {
button.disabled = true;
}
if(options.text) {
button.append(options.text);
}

5
src/components/chat/selection.ts
View File

@ -161,7 +161,10 @@ export default class ChatSelection {
if(show) {
if(hasCheckbox) return;
const checkboxField = CheckboxField('', bubble.dataset.mid, true);
const checkboxField = CheckboxField({
name: bubble.dataset.mid,
round: true
});
checkboxField.label.classList.add('bubble-select-checkbox');
// * if it is a render of new message

28
src/components/checkbox.ts
View File

@ -1,37 +1,47 @@
import appStateManager from "../lib/appManagers/appStateManager";
import { getDeepProperty } from "../helpers/object";
const CheckboxField = (text?: string, name?: string, round = false, stateKey?: string) => {
const CheckboxField = (options: {
text?: string,
name?: string,
round?: boolean,
stateKey?: string,
disabled?: boolean
} = {}) => {
const label = document.createElement('label');
label.classList.add('checkbox-field');
if(round) {
if(options.round) {
label.classList.add('checkbox-field-round');
}
if(options.disabled) {
label.classList.add('checkbox-disabled');
}
const input = document.createElement('input');
input.type = 'checkbox';
if(name) {
if(options.name) {
input.id = 'input-' + name;
}
if(stateKey) {
if(options.stateKey) {
appStateManager.getState().then(state => {
input.checked = getDeepProperty(state, stateKey);
input.checked = getDeepProperty(state, options.stateKey);
});
input.addEventListener('change', () => {
appStateManager.setByKey(stateKey, input.checked);
appStateManager.setByKey(options.stateKey, input.checked);
});
}
let span: HTMLSpanElement;
if(text) {
if(options.text) {
span = document.createElement('span');
span.classList.add('checkbox-caption');
if(text) {
span.innerText = text;
if(options.text) {
span.innerText = options.text;
}
} else {
label.classList.add('checkbox-without-caption');

15
src/components/popups/createPoll.ts
View File

@ -77,13 +77,22 @@ export default class PopupCreatePoll extends PopupElement {
settingsCaption.innerText = 'Settings';
if(!this.chat.appPeersManager.isBroadcast(this.chat.peerId)) {
this.anonymousCheckboxField = CheckboxField('Anonymous Voting', 'anonymous');
this.anonymousCheckboxField = CheckboxField({
text: 'Anonymous Voting',
name: 'anonymous'
});
this.anonymousCheckboxField.input.checked = true;
dd.append(this.anonymousCheckboxField.label);
}
this.multipleCheckboxField = CheckboxField('Multiple Answers', 'multiple');
this.quizCheckboxField = CheckboxField('Quiz Mode', 'quiz');
this.multipleCheckboxField = CheckboxField({
text: 'Multiple Answers',
name: 'multiple'
});
this.quizCheckboxField = CheckboxField({
text: 'Quiz Mode',
name: 'quiz'
});
this.multipleCheckboxField.input.addEventListener('change', () => {
const checked = this.multipleCheckboxField.input.checked;

5
src/components/popups/newMedia.ts
View File

@ -88,7 +88,10 @@ export default class PopupNewMedia extends PopupElement {
this.container.append(scrollable.container);
if(files.length > 1) {
this.groupCheckboxField = CheckboxField('Group items', 'group-items');
this.groupCheckboxField = CheckboxField({
text: 'Group items',
name: 'group-items'
});
this.container.append(this.groupCheckboxField.label, this.inputField.container);
this.groupCheckboxField.input.checked = true;

10
src/components/sidebarLeft/tabs/background.ts
View File

@ -27,10 +27,14 @@ export default class AppBackgroundTab extends SliderSuperTab {
{
const container = generateSection(this.scrollable);
const uploadButton = Button('btn-primary btn-transparent', {icon: 'cameraadd', text: 'Upload Wallpaper'});
const colorButton = Button('btn-primary btn-transparent', {icon: 'colorize', text: 'Set a Color'});
const uploadButton = Button('btn-primary btn-transparent', {icon: 'cameraadd', text: 'Upload Wallpaper', disabled: true});
const colorButton = Button('btn-primary btn-transparent', {icon: 'colorize', text: 'Set a Color', disabled: true});
const blurCheckboxField = CheckboxField('Blur Wallpaper Image', 'blur', false, 'settings.background.blur');
const blurCheckboxField = CheckboxField({
text: 'Blur Wallpaper Image',
name: 'blur',
stateKey: 'settings.background.blur'
});
blurCheckboxField.input.addEventListener('change', () => {
const active = grid.querySelector('.active') as HTMLElement;
if(!active) return;

56
src/components/sidebarLeft/tabs/generalSettings.ts
View File

@ -78,7 +78,11 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
new AppBackgroundTab(this.slider).open();
});
const animationsCheckboxField = CheckboxField('Enable Animations', 'animations', false, 'settings.animationsEnabled');
const animationsCheckboxField = CheckboxField({
text: 'Enable Animations',
name: 'animations',
stateKey: 'settings.animationsEnabled'
});
container.append(range.container, chatBackgroundButton, animationsCheckboxField.label);
}
@ -104,20 +108,46 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
{
const container = section('Auto-Download Media');
container.classList.add('sidebar-left-section-disabled');
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');
const contactsCheckboxField = CheckboxField({
text: 'Contacts',
name: 'contacts',
stateKey: 'settings.autoDownload.contacts'
});
const privateCheckboxField = CheckboxField({
text: 'Private Chats',
name: 'private',
stateKey: 'settings.autoDownload.private'
});
const groupsCheckboxField = CheckboxField({
text: 'Group Chats',
name: 'groups',
stateKey: 'settings.autoDownload.groups'
});
const channelsCheckboxField = CheckboxField({
text: 'Channels',
name: 'channels',
stateKey: 'settings.autoDownload.channels'
});
container.append(contactsCheckboxField.label, privateCheckboxField.label, groupsCheckboxField.label, channelsCheckboxField.label);
}
{
const container = section('Auto-Play Media');
container.classList.add('sidebar-left-section-disabled');
const gifsCheckboxField = CheckboxField('GIFs', 'gifs', false, 'settings.autoPlay.gifs');
const videosCheckboxField = CheckboxField('Videos', 'videos', false, 'settings.autoPlay.videos');
const gifsCheckboxField = CheckboxField({
text: 'GIFs',
name: 'gifs',
stateKey: 'settings.autoPlay.gifs'
});
const videosCheckboxField = CheckboxField({
text: 'Videos',
name: 'videos',
stateKey: 'settings.autoPlay.videos'
});
container.append(gifsCheckboxField.label, videosCheckboxField.label);
}
@ -125,8 +155,16 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
{
const container = section('Stickers');
const suggestCheckboxField = CheckboxField('Suggest Stickers by Emoji', 'suggest', false, 'settings.stickers.suggest');
const loopCheckboxField = CheckboxField('Loop Animated Stickers', 'loop', false, 'settings.stickers.loop');
const suggestCheckboxField = CheckboxField({
text: 'Suggest Stickers by Emoji',
name: 'suggest',
stateKey: 'settings.stickers.suggest'
});
const loopCheckboxField = CheckboxField({
text: 'Loop Animated Stickers',
name: 'loop',
stateKey: 'settings.stickers.loop'
});
container.append(suggestCheckboxField.label, loopCheckboxField.label);
}

4
src/components/sidebarLeft/tabs/includedChats.ts
View File

@ -98,7 +98,9 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
}
checkbox(selected?: boolean) {
const checkboxField = CheckboxField('', '', true);
const checkboxField = CheckboxField({
round: true
});
if(selected) {
checkboxField.input.checked = selected;
}

4
src/components/sidebarLeft/tabs/settings.ts
View File

@ -98,9 +98,9 @@ export default class AppSettingsTab extends SliderSuperTab {
buttonsDiv.append(this.buttons.edit = Button(className, {icon: 'edit', rippleSquare: true, text: 'Edit Profile'}));
buttonsDiv.append(this.buttons.folders = Button(className, {icon: 'folder', rippleSquare: true, text: 'Chat Folders'}));
buttonsDiv.append(this.buttons.general = Button(className, {icon: 'settings', rippleSquare: true, text: 'General Settings'}));
buttonsDiv.append(this.buttons.notifications = Button(className + ' btn-disabled', {icon: 'unmute', rippleSquare: true, text: 'Notifications'}));
buttonsDiv.append(this.buttons.notifications = Button(className, {icon: 'unmute', rippleSquare: true, text: 'Notifications', disabled: true}));
buttonsDiv.append(this.buttons.privacy = Button(className, {icon: 'lock', rippleSquare: true, text: 'Privacy and Security'}));
buttonsDiv.append(this.buttons.language = Button(className + ' btn-disabled', {icon: 'language', rippleSquare: true, text: 'Language'}));
buttonsDiv.append(this.buttons.language = Button(className, {icon: 'language', rippleSquare: true, text: 'Language', disabled: true}));
this.scrollable.append(this.avatarElem, this.nameDiv, this.phoneDiv, buttonsDiv);
this.scrollable.container.classList.add('profile-content-wrapper');

5
src/components/sidebarRight/tabs/sharedMedia.ts
View File

@ -77,7 +77,10 @@ export default class AppSharedMediaTab implements SliderTab {
notificationsStatus: this.profileContentEl.querySelector('.profile-row-notifications > p')
};
const checkboxField = CheckboxField('Notifications', 'notifications');
const checkboxField = CheckboxField({
text: 'Notifications',
name: 'notifications'
});
this.profileElements.notificationsCheckbox = checkboxField.input;
this.profileElements.notificationsCheckbox.checked = true;
this.profileElements.notificationsRow.prepend(checkboxField.label);

5
src/pages/pageSignIn.ts
View File

@ -290,7 +290,10 @@ let onFirstMount = () => {
this.removeAttribute('readonly'); // fix autocomplete
});*/
const signedCheckboxField = CheckboxField('Keep me signed in', 'keepSession');
const signedCheckboxField = CheckboxField({
text: 'Keep me signed in',
name: 'keepSession'
});
signedCheckboxField.input.checked = true;
btnNext = Button('btn-primary', {text: 'NEXT'});

2
src/scss/partials/_button.scss
View File

@ -327,6 +327,6 @@
color: #707579 !important;
&:before {
color: #707579 !important;
color: inherit !important;
}
}

6
src/scss/partials/_checkbox.scss
View File

@ -7,6 +7,12 @@
cursor: pointer;
min-width: var(--size);
min-height: var(--size);
transition: .2s opacity;
&.checkbox-disabled {
pointer-events: none !important;
opacity: .25;
}
@include respond-to(handhelds) {
margin-bottom: 27px;

5
src/scss/partials/_leftSidebar.scss
View File

@ -891,6 +891,11 @@
&-caption {
padding: 0 .875rem;
}
&-disabled {
pointer-events: none !important;
opacity: .25;
}
}
&-h2 {