diff --git a/src/components/buttonCorner.ts b/src/components/buttonCorner.ts
new file mode 100644
index 00000000..a69c88ea
--- /dev/null
+++ b/src/components/buttonCorner.ts
@@ -0,0 +1,14 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
+import Button from "./button";
+
+const ButtonCorner = (options: Partial<{className: string, icon: string, noRipple: true, onlyMobile: true, asDiv: boolean}> = {}) => {
+ const button = Button('btn-circle btn-corner z-depth-1' + (options.className ? ' ' + options.className : ''), options);
+ return button;
+};
+
+export default ButtonCorner;
diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts
index eea2941e..a20499ae 100644
--- a/src/components/chat/input.ts
+++ b/src/components/chat/input.ts
@@ -47,6 +47,7 @@ import { isMobile } from '../../helpers/userAgent';
import { i18n } from '../../lib/langPack';
import { generateTail } from './bubbles';
import findUpClassName from '../../helpers/dom/findUpClassName';
+import ButtonCorner from '../buttonCorner';
const RECORD_MIN_TIME = 500;
const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@@ -156,7 +157,7 @@ export default class ChatInput {
this.inputContainer.append(this.rowsWrapper, fakeRowsWrapper, fakeSelectionWrapper);
this.chatInput.append(this.inputContainer);
- this.goDownBtn = Button('bubbles-go-down btn-corner btn-circle z-depth-1 hide', {icon: 'arrow_down'});
+ this.goDownBtn = ButtonCorner({icon: 'arrow_down', className: 'bubbles-go-down hide'});
this.inputContainer.append(this.goDownBtn);
attachClickEvent(this.goDownBtn, (e) => {
diff --git a/src/components/editPeer.ts b/src/components/editPeer.ts
index c394b1a5..d96bc05c 100644
--- a/src/components/editPeer.ts
+++ b/src/components/editPeer.ts
@@ -9,8 +9,8 @@ import AvatarEdit from "./avatarEdit";
import AvatarElement from "./avatar";
import InputField from "./inputField";
import ListenerSetter from "../helpers/listenerSetter";
-import Button from "./button";
import { safeAssign } from "../helpers/object";
+import ButtonCorner from "./buttonCorner";
export default class EditPeer {
public nextBtn: HTMLButtonElement;
@@ -32,7 +32,7 @@ export default class EditPeer {
}) {
safeAssign(this, options);
- this.nextBtn = Button('btn-circle btn-corner tgico-check');
+ this.nextBtn = ButtonCorner({icon: 'check'});
this.avatarElem = document.createElement('avatar-element') as AvatarElement;
this.avatarElem.classList.add('avatar-placeholder', 'avatar-120');
diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts
index 78122c99..c127a3de 100644
--- a/src/components/sidebarLeft/index.ts
+++ b/src/components/sidebarLeft/index.ts
@@ -208,7 +208,7 @@ export class AppSidebarLeft extends SidebarSlider {
text: 'NewPrivateChat',
onClick: onContactsClick
}]);
- this.newBtnMenu.className = 'btn-circle rp btn-corner btn-menu-toggle animated-button-icon';
+ this.newBtnMenu.className = 'btn-circle rp btn-corner z-depth-1 btn-menu-toggle animated-button-icon';
this.newBtnMenu.insertAdjacentHTML('afterbegin', `
diff --git a/src/components/sidebarLeft/tabs/addMembers.ts b/src/components/sidebarLeft/tabs/addMembers.ts
index d9ddec20..7b530906 100644
--- a/src/components/sidebarLeft/tabs/addMembers.ts
+++ b/src/components/sidebarLeft/tabs/addMembers.ts
@@ -7,8 +7,8 @@
import { SliderSuperTab } from "../../slider";
import AppSelectPeers from "../../appSelectPeers";
import { putPreloader } from "../../misc";
-import Button from "../../button";
import { LangPackKey, _i18n } from "../../../lib/langPack";
+import ButtonCorner from "../../buttonCorner";
export default class AppAddMembersTab extends SliderSuperTab {
private nextBtn: HTMLButtonElement;
@@ -18,7 +18,7 @@ export default class AppAddMembersTab extends SliderSuperTab {
private skippable: boolean;
protected init() {
- this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'});
+ this.nextBtn = ButtonCorner({icon: 'arrow_next'});
this.content.append(this.nextBtn);
this.nextBtn.addEventListener('click', () => {
diff --git a/src/components/sidebarLeft/tabs/blockedUsers.ts b/src/components/sidebarLeft/tabs/blockedUsers.ts
index 7d1f1244..098165fc 100644
--- a/src/components/sidebarLeft/tabs/blockedUsers.ts
+++ b/src/components/sidebarLeft/tabs/blockedUsers.ts
@@ -11,10 +11,10 @@ import { attachClickEvent } from "../../../helpers/dom";
import ButtonMenu from "../../buttonMenu";
import appDialogsManager from "../../../lib/appManagers/appDialogsManager";
import appUsersManager from "../../../lib/appManagers/appUsersManager";
-import Button from "../../button";
import PopupPickUser from "../../popups/pickUser";
import rootScope from "../../../lib/rootScope";
import findUpTag from "../../../helpers/dom/findUpTag";
+import ButtonCorner from "../../buttonCorner";
export default class AppBlockedUsersTab extends SliderSuperTab {
public peerIds: number[];
@@ -32,7 +32,7 @@ export default class AppBlockedUsersTab extends SliderSuperTab {
this.scrollable.append(section.container);
}
- const btnAdd = Button('btn-circle btn-corner tgico-add is-visible');
+ const btnAdd = ButtonCorner({icon: 'add', className: 'is-visible'});
this.content.append(btnAdd);
attachClickEvent(btnAdd, (e) => {
diff --git a/src/components/sidebarLeft/tabs/newChannel.ts b/src/components/sidebarLeft/tabs/newChannel.ts
index 2fe16bf1..2572f445 100644
--- a/src/components/sidebarLeft/tabs/newChannel.ts
+++ b/src/components/sidebarLeft/tabs/newChannel.ts
@@ -13,6 +13,7 @@ import { SliderSuperTab } from "../../slider";
import AvatarEdit from "../../avatarEdit";
import AppAddMembersTab from "./addMembers";
import { _i18n } from "../../../lib/langPack";
+import ButtonCorner from "../../buttonCorner";
export default class AppNewChannelTab extends SliderSuperTab {
private uploadAvatar: () => Promise = null;
@@ -58,7 +59,7 @@ export default class AppNewChannelTab extends SliderSuperTab {
caption.classList.add('caption');
_i18n(caption, 'Channel.DescriptionHolderDescrpiton');
- this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'});
+ this.nextBtn = ButtonCorner({icon: 'arrow_next'});
this.nextBtn.addEventListener('click', () => {
const title = this.channelNameInputField.value;
diff --git a/src/components/sidebarLeft/tabs/newGroup.ts b/src/components/sidebarLeft/tabs/newGroup.ts
index 3c38a68d..b1a9a907 100644
--- a/src/components/sidebarLeft/tabs/newGroup.ts
+++ b/src/components/sidebarLeft/tabs/newGroup.ts
@@ -15,6 +15,7 @@ import InputField from "../../inputField";
import { SliderSuperTab } from "../../slider";
import AvatarEdit from "../../avatarEdit";
import { i18n } from "../../../lib/langPack";
+import ButtonCorner from "../../buttonCorner";
export default class AppNewGroupTab extends SliderSuperTab {
private searchGroup = new SearchGroup(' ', 'contacts', true, 'new-group-members disable-hover', false);
@@ -47,7 +48,7 @@ export default class AppNewGroupTab extends SliderSuperTab {
this.nextBtn.classList.toggle('is-visible', !!value.length && !this.groupNameInputField.input.classList.contains('error'));
});
- this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'});
+ this.nextBtn = ButtonCorner({icon: 'arrow_next'});
this.nextBtn.addEventListener('click', () => {
const title = this.groupNameInputField.value;
diff --git a/src/components/sidebarRight/tabs/groupType.ts b/src/components/sidebarRight/tabs/groupType.ts
index 844ebc7b..808adff6 100644
--- a/src/components/sidebarRight/tabs/groupType.ts
+++ b/src/components/sidebarRight/tabs/groupType.ts
@@ -20,6 +20,7 @@ import { UsernameInputField } from "../../usernameInputField";
import { SliderSuperTabEventable } from "../../sliderTab";
import I18n from "../../../lib/langPack";
import PopupPeer from "../../popups/peer";
+import ButtonCorner from "../../buttonCorner";
export default class AppGroupTypeTab extends SliderSuperTabEventable {
public peerId: number;
@@ -134,7 +135,7 @@ export default class AppGroupTypeTab extends SliderSuperTabEventable {
inputWrapper.append(linkInputField.container)
publicSection.content.append(inputWrapper);
- const applyBtn = Button('btn-circle btn-corner tgico-check is-visible');
+ const applyBtn = ButtonCorner({icon: 'check', className: 'is-visible'});
this.content.append(applyBtn);
attachClickEvent(applyBtn, () => {
diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts
index 543a6841..bc76348d 100644
--- a/src/components/sidebarRight/tabs/sharedMedia.ts
+++ b/src/components/sidebarRight/tabs/sharedMedia.ts
@@ -46,6 +46,7 @@ import Scrollable from "../../scrollable";
import { isTouchSupported } from "../../../helpers/touchSupport";
import { isFirefox } from "../../../helpers/userAgent";
import appDownloadManager from "../../../lib/appManagers/appDownloadManager";
+import ButtonCorner from "../../buttonCorner";
let setText = (text: string, row: Row) => {
//fastRaf(() => {
@@ -912,7 +913,7 @@ export default class AppSharedMediaTab extends SliderSuperTab {
this.profile.element.append(this.searchSuper.container);
- const btnAddMembers = Button('btn-corner btn-circle', {icon: 'addmember_filled'});
+ const btnAddMembers = ButtonCorner({icon: 'addmember_filled'});
this.content.append(btnAddMembers);
btnAddMembers.addEventListener('click', () => {
diff --git a/src/lang.ts b/src/lang.ts
index ada9f5c0..ba192daf 100644
--- a/src/lang.ts
+++ b/src/lang.ts
@@ -490,7 +490,8 @@ const lang = {
"ChatList.Filter.List.Title": "Chat Folders",
"ChatList.Filter.Include.AddChat": "Add Chats",
"ChatList.Filter.Exclude.AddChat": "Add Chats",
- "ChatList.Filter.All": "All",
+ //"ChatList.Filter.All": "All",
+ "ChatList.Filter.AllChats": "All Chats",
"ChatList.Filter.Contacts": "Contacts",
"ChatList.Filter.NonContacts": "Non-Contacts",
"ChatList.Filter.Groups": "Groups",
diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts
index f9351b45..889ce86a 100644
--- a/src/lib/appManagers/appDialogsManager.ts
+++ b/src/lib/appManagers/appDialogsManager.ts
@@ -281,7 +281,7 @@ export class AppDialogsManager {
this.addFilter({
id: this.filterId,
title: '',
- titleEl: i18n('ChatList.Filter.All'),
+ titleEl: i18n('ChatList.Filter.AllChats'),
orderIndex: 0
});
diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss
index 94920949..6b1e0502 100644
--- a/src/scss/partials/_button.scss
+++ b/src/scss/partials/_button.scss
@@ -305,7 +305,7 @@
height: 40px;
align-items: center;
margin: 15px auto 1rem;
- border-radius: 30px;
+ border-radius: 20px;
padding: 0 24px 0 12px;
display: flex;
diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss
index 280cb927..b79b77e4 100644
--- a/src/scss/partials/_leftSidebar.scss
+++ b/src/scss/partials/_leftSidebar.scss
@@ -73,41 +73,43 @@
}
}
+ .item-main {
+ --menu-size: 3rem;
+ }
+
.menu-horizontal-scrollable {
+ --scrollable-size: var(--menu-size);
z-index: 1;
background-color: var(--surface-color);
position: relative;
- box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16);
top: unset;
- height: 43px;
+
+ @include respond-to(handhelds) {
+ box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16);
+ }
.scrollable {
position: relative;
}
.menu-horizontal-div {
- height: 43px;
position: relative !important;
-
justify-content: flex-start;
z-index: 0;
&-item {
- height: 43px;
- padding: 0 1rem;
- display: flex;
- justify-content: center;
- align-items: center;
flex: 0 0 auto;
min-width: 3rem;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
> span {
overflow: visible;
i {
- bottom: calc(-.6875rem);
- padding-right: 1rem !important;
- margin-left: -.5rem !important;
+ bottom: calc(-.6875rem - 2px);
+ /* padding-right: 1rem !important;
+ margin-left: -.5rem !important; */
}
}
}
@@ -123,8 +125,8 @@
}
&:not(.hide) + .scrollable {
- top: 43px;
- height: calc(100% - 43px);
+ top: var(--menu-size);
+ height: calc(100% - var(--menu-size));
#folders-container {
margin-top: .5rem;
@@ -634,6 +636,7 @@
right: 1rem;
top: 50%;
transform: translateY(-50%);
+ border-radius: 15px;
body.animation-level-0 & {
transition: none;
diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss
index d8c18888..9d552d55 100644
--- a/src/scss/partials/_rightSidebar.scss
+++ b/src/scss/partials/_rightSidebar.scss
@@ -166,24 +166,6 @@
}
} */
}
-
- .search-super {
- .menu-horizontal-div-item {
- height: 3.5rem;
- padding-top: 0;
- padding-bottom: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1rem;
- line-height: var(--line-height);
- border-radius: 0;
- }
-
- .menu-horizontal-div i {
- bottom: calc(-.625rem - 7px);
- }
- }
}
.search-super {
@@ -239,7 +221,6 @@
top: 0px;
z-index: 2;
background-color: var(--surface-color);
- height: 3.5rem;
&:before {
position: absolute;
diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss
index 6b50d923..1227ab33 100644
--- a/src/scss/partials/_slider.scss
+++ b/src/scss/partials/_slider.scss
@@ -5,6 +5,9 @@
*/
.menu-horizontal-scrollable {
+ --scrollable-size: 3.5rem;
+ height: var(--scrollable-size);
+
&:after {
content: " ";
position: absolute;
@@ -22,34 +25,34 @@
}
.menu-horizontal-div {
+ --size: var(--scrollable-size, 3.5rem);
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
+ flex-direction: row;
position: relative;
z-index: 2;
- flex-direction: row;
+ user-select: none;
color: var(--secondary-text-color);
border-bottom: 1px solid var(--border-color);
- position: relative;
&-item {
- display: inline-block;
- padding: .75rem 1rem;
+ height: var(--size);
+ padding: 0 1rem;
cursor: pointer;
text-align: center;
flex: 1 1 auto;
- //flex: 0 0 auto;
- //overflow: hidden;
- user-select: none;
- // font-size: 1rem;
- font-size: 14px;
+ font-size: 1rem;
font-weight: 500;
position: relative;
- border-top-left-radius: 6px;
- border-top-right-radius: 6px;
transition: none !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: var(--line-height);
+ border-radius: 0;
@include hover-background-effect();
@@ -81,7 +84,7 @@
i {
position: absolute;
- bottom: calc(-.625rem - 3px);
+ bottom: calc(-.625rem - 7px);
left: 0;
opacity: 0;
background-color: var(--primary-color);