diff --git a/src/components/appSelectPeers.ts b/src/components/appSelectPeers.ts
index 94dbeb00..03441388 100644
--- a/src/components/appSelectPeers.ts
+++ b/src/components/appSelectPeers.ts
@@ -8,6 +8,7 @@ import rootScope from "../lib/rootScope";
import { cancelEvent, findUpAttribute, findUpClassName } from "../helpers/dom";
import Scrollable from "./scrollable";
import { FocusDirection } from "../helpers/fastSmoothScroll";
+import CheckboxField from "./checkbox";
type PeerType = 'contacts' | 'dialogs';
@@ -46,6 +47,7 @@ export default class AppSelectPeers {
private renderResultsFunc?: (peerIds: number[]) => void;
private chatRightsAction?: ChatRights;
private multiSelect = true;
+ private rippleEnabled = true;
constructor(options: {
appendTo: AppSelectPeers['appendTo'],
@@ -54,7 +56,8 @@ export default class AppSelectPeers {
onFirstRender?: () => void,
renderResultsFunc?: AppSelectPeers['renderResultsFunc'],
chatRightsAction?: AppSelectPeers['chatRightsAction'],
- multiSelect?: AppSelectPeers['multiSelect']
+ multiSelect?: AppSelectPeers['multiSelect'],
+ rippleEnabled?: boolean
}) {
for(let i in options) {
// @ts-ignore
@@ -341,14 +344,20 @@ export default class AppSelectPeers {
dialog: peerId,
container: this.scrollable,
drawStatus: false,
- rippleEnabled: false,
+ rippleEnabled: true,
avatarSize: 48
});
if(this.multiSelect) {
const selected = this.selected.has(peerId);
- dom.containerEl.insertAdjacentHTML('afterbegin', `
`);
- if(selected) dom.listEl.classList.add('active');
+ const checkboxField = CheckboxField();
+
+ if(selected) {
+ dom.listEl.classList.add('active');
+ checkboxField.input.checked = true;
+ }
+
+ dom.containerEl.prepend(checkboxField.label);
}
let subtitle = '';
diff --git a/src/components/checkbox.ts b/src/components/checkbox.ts
index 7b0202b7..99e52ad5 100644
--- a/src/components/checkbox.ts
+++ b/src/components/checkbox.ts
@@ -1,13 +1,19 @@
import appStateManager from "../lib/appManagers/appStateManager";
import { getDeepProperty } from "../helpers/object";
-const CheckboxField = (text: string, name: string, round = false, stateKey?: string) => {
+const CheckboxField = (text?: string, name?: string, round = false, stateKey?: string) => {
const label = document.createElement('label');
- label.classList.add(round ? 'checkbox-field-round' : 'checkbox-field');
+ label.classList.add('checkbox-field');
+
+ if(round) {
+ label.classList.add('checkbox-field-round');
+ }
const input = document.createElement('input');
input.type = 'checkbox';
- input.id = 'input-' + name;
+ if(name) {
+ input.id = 'input-' + name;
+ }
if(stateKey) {
appStateManager.getState().then(state => {
@@ -19,14 +25,42 @@ const CheckboxField = (text: string, name: string, round = false, stateKey?: str
});
}
- const span = document.createElement('span');
- span.classList.add('checkbox-caption');
- if(round) span.classList.add('tgico-check');
+ let span: HTMLSpanElement;
if(text) {
- span.innerText = text;
+ span = document.createElement('span');
+ span.classList.add('checkbox-caption');
+
+ if(text) {
+ span.innerText = text;
+ }
+ } else {
+ label.classList.add('checkbox-without-caption');
}
- label.append(input, span);
+ const box = document.createElement('div');
+ box.classList.add('checkbox-box');
+
+ const checkSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ checkSvg.classList.add('checkbox-box-check');
+ checkSvg.setAttributeNS(null, 'viewBox', '0 0 24 24');
+ const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+ use.setAttributeNS(null, 'href', '#check');
+ use.setAttributeNS(null, 'x', '-1');
+ checkSvg.append(use);
+
+ const bg = document.createElement('div');
+ bg.classList.add('checkbox-box-background');
+
+ const border = document.createElement('div');
+ border.classList.add('checkbox-box-border');
+
+ box.append(border, bg, checkSvg);
+
+ label.append(input, box);
+
+ if(span) {
+ label.append(span);
+ }
return {label, input, span};
};
diff --git a/src/components/popups/forward.ts b/src/components/popups/forward.ts
index ce7fe5e5..bc018f41 100644
--- a/src/components/popups/forward.ts
+++ b/src/components/popups/forward.ts
@@ -35,7 +35,8 @@ export default class PopupForward extends PopupElement {
}
},
chatRightsAction: 'send',
- multiSelect: false
+ multiSelect: false,
+ rippleEnabled: false
});
//this.scrollable = new Scrollable(this.body);
diff --git a/src/components/sidebarLeft/tabs/includedChats.ts b/src/components/sidebarLeft/tabs/includedChats.ts
index d00ccbca..9c31d324 100644
--- a/src/components/sidebarLeft/tabs/includedChats.ts
+++ b/src/components/sidebarLeft/tabs/includedChats.ts
@@ -10,6 +10,8 @@ import { copy } from "../../../helpers/object";
import ButtonIcon from "../../buttonIcon";
import { FocusDirection } from "../../../helpers/fastSmoothScroll";
import { fastRaf } from "../../../helpers/schedulers";
+import CheckboxField from "../../checkbox";
+import Button from "../../button";
export default class AppIncludedChatsTab extends SliderSuperTab {
private confirmBtn: HTMLElement;
@@ -97,7 +99,12 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
}
checkbox(selected?: boolean) {
- return ``;
+ const checkboxField = CheckboxField('', '', true);
+ if(selected) {
+ checkboxField.input.checked = selected;
+ }
+
+ return checkboxField.label;
}
renderResults = async(peerIds: number[]) => {
@@ -111,12 +118,12 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
dialog: peerId,
container: this.selector.scrollable,
drawStatus: false,
- rippleEnabled: false,
+ rippleEnabled: true,
avatarSize: 46
});
const selected = this.selector.selected.has(peerId);
- dom.containerEl.insertAdjacentHTML('beforeend', this.checkbox(selected));
+ dom.containerEl.append(this.checkbox(selected));
if(selected) dom.listEl.classList.add('active');
let subtitle = '';
@@ -173,11 +180,14 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
};
}
- let html = '';
+ const f = document.createDocumentFragment();
for(const key in details) {
- html += ``;
+ const button = Button('btn-primary btn-transparent folder-category-button', {icon: details[key].ico, text: details[key].text});
+ button.dataset.peerId = key;
+ button.append(this.checkbox());
+ f.append(button);
}
- categories.innerHTML = html;
+ categories.append(f);
const hr = document.createElement('hr');
hr.style.margin = '7px 0 9px';
diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts
index ca33387f..d4c3956a 100644
--- a/src/components/sidebarRight/tabs/sharedMedia.ts
+++ b/src/components/sidebarRight/tabs/sharedMedia.ts
@@ -1,5 +1,5 @@
import appImManager from "../../../lib/appManagers/appImManager";
-import appMessagesManager, { MyInputMessagesFilter, MyMessage } from "../../../lib/appManagers/appMessagesManager";
+import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
import appPeersManager from "../../../lib/appManagers/appPeersManager";
import appProfileManager from "../../../lib/appManagers/appProfileManager";
import appUsersManager from "../../../lib/appManagers/appUsersManager";
@@ -10,6 +10,7 @@ import AppSearchSuper, { SearchSuperType } from "../../appSearchSuper.";
import AvatarElement from "../../avatar";
import Scrollable from "../../scrollable";
import { SliderTab } from "../../slider";
+import CheckboxField from "../../checkbox";
let setText = (text: string, el: HTMLDivElement) => {
window.requestAnimationFrame(() => {
@@ -72,10 +73,15 @@ export default class AppSharedMediaTab implements SliderTab {
username: this.profileContentEl.querySelector('.profile-row-username'),
phone: this.profileContentEl.querySelector('.profile-row-phone'),
notificationsRow: this.profileContentEl.querySelector('.profile-row-notifications'),
- notificationsCheckbox: this.profileContentEl.querySelector('#profile-notifications'),
+ notificationsCheckbox: null,
notificationsStatus: this.profileContentEl.querySelector('.profile-row-notifications > p')
};
+ const checkboxField = CheckboxField('Notifications', 'notifications');
+ this.profileElements.notificationsCheckbox = checkboxField.input;
+ this.profileElements.notificationsCheckbox.checked = true;
+ this.profileElements.notificationsRow.prepend(checkboxField.label);
+
this.scroll = new Scrollable(this.container, 'SR', 400);
this.profileElements.notificationsCheckbox.addEventListener('change', () => {
diff --git a/src/index.hbs b/src/index.hbs
index 0f4dd5ab..f8e8c96a 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -89,6 +89,7 @@
+
@@ -193,10 +194,6 @@
Phone
diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts
index 68c7942a..daeeb3cb 100644
--- a/src/pages/pageSignIn.ts
+++ b/src/pages/pageSignIn.ts
@@ -147,7 +147,7 @@ let onFirstMount = () => {
void selectWrapper.offsetWidth; // reflow
selectWrapper.classList.add('active');
- if(countryInput.value) {
+ if(countryInput.value) { // * avoid selecting whole empty field on iOS devices
countryInput.select(); // * select text
}
diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss
index 5a653d8e..b7d3f045 100644
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@@ -186,13 +186,10 @@ $bubble-margin: .25rem;
position: absolute;
left: 0;
display: flex;
+ margin: 0;
- [type="checkbox"] {
- &:checked + .checkbox-caption {
- &:after {
- background-color: #61c642;
- }
- }
+ .checkbox-box-background {
+ background-color: #61c642;
}
}
@@ -202,6 +199,9 @@ $bubble-margin: .25rem;
/* left: 0;
top: 50%;
transform: translateY(-50%); */
+ .checkbox-box {
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .4);
+ }
}
.bubbles.is-selecting &:not(.is-album) {
@@ -1050,22 +1050,6 @@ $bubble-margin: .25rem;
border: 2px solid #c4c9cc;
border-radius: inherit;
}
-
- /* [type="checkbox"]:not(:checked) + .checkbox-caption {
- &:after {
- width: 1.25rem;
- height: 1.25rem;
- left: .125rem;
- top: .125rem;
- border-color: #c4c9cc;
- }
- } */
-
- .checkbox-caption {
- &:after {
- box-shadow: none;
- }
- }
}
&:first-of-type {
@@ -1986,7 +1970,7 @@ $bubble-margin: .25rem;
border-color: #9ed695;
}
- .checkbox-caption:after {
+ .checkbox-box-border {
border-color: #eeffde;
}
}
diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss
index 18324860..133a6769 100644
--- a/src/scss/partials/_chatlist.scss
+++ b/src/scss/partials/_chatlist.scss
@@ -58,7 +58,7 @@
max-height: 72px;
border-radius: $border-radius-medium;
display: flex;
- align-items: flex-start;
+ align-items: flex-start; // TODO: проверить разницу в производительности с align-items: center;
flex-direction: row;
position: relative;
cursor: pointer;
@@ -71,7 +71,7 @@
} */
@include respond-to(handhelds) {
- padding: 9px 12px 0 9px !important;
+ padding: 9px 12px 9px 9px !important;
border-radius: 0;
margin: 0;
overflow: hidden;
@@ -90,6 +90,15 @@
//margin: .1rem 0;
line-height: 27px;
}
+
+ p {
+ margin: 0;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: flex-start;
+ height: 27px;
+ }
}
li.menu-open {
@@ -104,15 +113,6 @@
}
}
- p {
- margin: 0;
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- align-items: flex-start;
- height: 27px;
- }
-
.dialog {
&-title {
&-details {
@@ -188,7 +188,7 @@
font-size: 1.2rem;
margin: 0 .125rem;
overflow: visible;
- margin-top: -1.5px;
+ //margin-top: -1.5px;
}
}
diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss
index b5056a9a..fca4bcbd 100644
--- a/src/scss/partials/_checkbox.scss
+++ b/src/scss/partials/_checkbox.scss
@@ -1,63 +1,104 @@
.checkbox-field {
- margin: 1.5rem 0;
+ --size: 18px;
+ margin: 1.5rem 1.1875rem;
display: block;
text-align: left;
- padding: 0 1.1875rem;
- /* font-weight: 500; */
position: relative;
cursor: pointer;
+ min-width: var(--size);
+ min-height: var(--size);
@include respond-to(handhelds) {
margin-bottom: 27px;
}
-}
-.checkbox-field-round {
- .checkbox-caption {
- min-width: 1.5rem;
- min-height: 1.5rem;
-
- &:before {
- color: #fff;
- font-size: 1rem;
- line-height: 1.5rem;
- margin-left: .25rem;
- transition: opacity .2s ease-in-out;
- opacity: 0;
+ .checkbox-box {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: var(--size);
+ height: var(--size);
+ border-radius: 3px;
+ overflow: hidden;
+
+ html.is-safari & {
+ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
+ }
+
+ &-check, &-background, &-border {
position: absolute;
- font-weight: bold;
- z-index: 1;
+ top: 0;
+ left: 0;
+ }
- body.animation-level-0 & {
- transition: none;
- }
+ &-border {
+ right: 0;
+ bottom: 0;
+ border-radius: inherit;
+ border: 2px solid #8d969c;
+ //border-color: #000;
}
- &:after {
- content: '';
- position: absolute;
+ &-background {
+ top: -15%;
+ right: -15%;
+ bottom: -15%;
+ left: -15%;
+ background-color: $button-primary-background;
+ transform: scale(1);
+ transition: transform .2s 0s ease-in-out;
border-radius: 50%;
- height: 1.5rem;
- width: 1.5rem;
- box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .4);
- border: 2px solid #fff;
- //left: 0;
- background-color: transparent;
- transition: background-color .2s ease-in-out;
+ }
- body.animation-level-0 & {
- transition: none;
+ &-check {
+ --offset: 1px;
+ width: calc(var(--size) - var(--offset));
+ height: calc(var(--size) - var(--offset));
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ use {
+ stroke: #fff;
+ stroke-width: 2.75;
+ stroke-linecap: round;
+ stroke-dasharray: 24.19, 24.19;
+ stroke-dashoffset: 0;
+ transition: stroke-dasharray .1s .2s ease-in-out, visibility 0s .2s;
}
}
}
- [type="checkbox"]:checked + .checkbox-caption {
- &:before {
- opacity: 1;
+ .checkbox-caption {
+ position: relative;
+ padding-left: 3.3125rem;
+ cursor: pointer;
+ display: inline-block;
+ height: 24px;
+ line-height: 26px;
+ user-select: none;
+ transition: .2s opacity;
+
+ body.animation-level-0 & {
+ transition: none;
}
+ }
+}
- &:after {
- background-color: $button-primary-background;
+.checkbox-field-round {
+ --size: 1.5rem;
+
+ .checkbox-box {
+ border-radius: 50%;
+
+ &-border {
+ border: 2px solid #fff;
+ z-index: 1;
+ }
+
+ &-check {
+ --offset: 10px;
}
}
}
@@ -157,80 +198,26 @@
}
.checkbox-field [type="checkbox"] {
- & + span {
- position: relative;
- padding-left: 3.3125rem;
- cursor: pointer;
- display: inline-block;
- height: 24px;
- line-height: 26px;
- user-select: none;
- transition: .2s opacity;
-
- body.animation-level-0 & {
- transition: none;
- }
-
- &:before, &:after {
- content: '';
- left: 0;
- position: absolute;
- transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-
- body.animation-level-0 & {
- transition: none;
+ &:not(:checked) + .checkbox-box {
+ .checkbox-box-check {
+ use {
+ stroke-dasharray: 0, 24.19;
+ visibility: hidden;
+ transition: stroke-dasharray .1s ease-in-out, visibility 0s .1s;
}
}
-
- &:before {
- border-radius: 2px;
- z-index: 1;
- }
-
- &:after {
- height: 18px;
- width: 18px;
- z-index: 0;
- border: 2px solid $button-primary-background;
- border-radius: 3px;
- top: 50%;
- transform: translateY(-50%);
+
+ .checkbox-box-background {
+ transition: transform .2s .1s ease-in-out;
+ transform: scale(0);
}
}
- &:not(:checked) + span:before {
- width: 0;
- height: 0;
- border: 2px solid transparent;
- left: 6px;
- top: 10px;
- transform: rotateZ(45deg);
- transform-origin: 100% 100%;
- }
-
- &:checked + span:before {
- top: 4px;
- left: -1px;
- width: 8px;
- height: 14px;
- border-top: 2px solid transparent;
- border-left: 2px solid transparent;
- border-right: 2px solid #fff;
- border-bottom: 2px solid #fff;
- transform: rotateZ(45deg);
- transform-origin: 100% 100%;
- }
-
- &:not(:checked) + span:after {
- background-color: transparent;
- border-color: #8d969c;
- }
-
- &:checked + span:after {
- background-color: $button-primary-background;
+ &:checked + .checkbox-box {
+
}
- &:disabled + span {
+ &:disabled + .checkbox-box, &:disabled ~ .checkbox-caption {
cursor: default;
opacity: .25;
}
diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss
index d680e089..669aa939 100644
--- a/src/scss/partials/_leftSidebar.scss
+++ b/src/scss/partials/_leftSidebar.scss
@@ -610,6 +610,7 @@
p {
height: unset;
justify-content: flex-start;
+ margin: 0;
}
p:last-child {
@@ -684,24 +685,14 @@
.folder-categories {
width: 100%;
- .checkbox {
- margin-top: 0 !important;
+ .checkbox-field {
position: absolute;
- right: 0;
-
- [type="checkbox"] + span {
- padding-left: 46px;
+ right: 1.625rem !important;
- @include respond-to(handhelds) {
- padding-left: 38px;
- }
+ @include respond-to(handhelds) {
+ right: 1rem !important;
}
}
-
- .checkbox-field {
- margin: 0;
- padding: 0;
- }
}
.folder-category-button {
@@ -712,7 +703,7 @@
border-radius: 0;
@include respond-to(handhelds) {
- padding: 0 1rem;
+ padding: 0 1.125rem;
}
&:before {
@@ -729,8 +720,9 @@
ul {
li > .rp {
margin: 0 .5rem;
- padding: .5rem .75rem;
+ padding: 7px .75rem !important;
height: 3.875rem;
+ max-height: 3.875rem;
@include respond-to(handhelds) {
margin: 0;
diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss
index 03201476..3e8054c0 100644
--- a/src/scss/partials/_rightSidebar.scss
+++ b/src/scss/partials/_rightSidebar.scss
@@ -89,11 +89,11 @@
.checkbox-field {
margin: 0;
padding: 0;
+ margin-left: -54px;
}
- [type="checkbox"] + span {
+ .checkbox-caption {
padding-left: 54px;
- margin-left: -54px;
}
&-wrapper {
diff --git a/src/scss/partials/_selector.scss b/src/scss/partials/_selector.scss
index e08434c2..36916d0c 100644
--- a/src/scss/partials/_selector.scss
+++ b/src/scss/partials/_selector.scss
@@ -24,10 +24,6 @@
position: relative;
max-height: inherit; // fix safari
}
-
- avatar-element:before {
- font-size: 18px;
- }
}
&-search {
@@ -123,6 +119,10 @@
.chatlist-container {
height: 100%;
flex: 1 1 auto;
+
+ .scrollable > :first-child {
+ margin-top: .5rem;
+ }
}
ul {
@@ -131,11 +131,11 @@
}
p {
- height: 24px;
+ height: 24px !important;
}
span.user-last-message {
- font-size: 14px;
+ font-size: 14px;
}
li {
@@ -146,6 +146,8 @@
padding: 12px 8.5px;
@include respond-to(handhelds) {
+ height: 66px;
+ max-height: 66px;
margin: 0;
}
@@ -157,11 +159,8 @@
}
hr {
- margin: 0 0 8px;
- }
-
- [type="checkbox"] + span {
- padding-left: calc(9px + 2.25rem);
+ margin: 0;
+ padding: 0;
}
.checkbox {
@@ -172,5 +171,27 @@
.checkbox-field {
margin: 0;
padding: 0;
+ transform: translateY(-50%);
+ top: 50%;
+
+ &:first-child {
+ margin-right: 1.6875rem;
+ margin-left: .6875rem;
+ }
+ }
+
+ .checkbox-field-round {
+ position: absolute;
+ right: 1.125rem;
+ --size: 1.25rem;
+
+ .checkbox-box-border {
+ border-color: #dadbdc;
+ z-index: unset;
+ }
+
+ .checkbox-box-check {
+ --offset: 6px;
+ }
}
}
\ No newline at end of file
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 80dc7f2c..021349d1 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -565,7 +565,7 @@ hr {
text-align: left;
display: grid;
- grid-template-columns: calc(26px + 2rem) 1fr 50px;
+ grid-template-columns: calc(26px + 2rem) 1fr 80px;
html.no-touch &:hover {
background-color: var(--color-gray-hover);