ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat Folders: Revert to smaller size (#1072)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-11 02:57:08 +03:00
parent 1436cb6908
commit bb574820a5
4 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/left/main/LeftMain.scss
View File

@ -36,8 +36,13 @@
.Tab { .Tab {
flex: 0 0 auto; flex: 0 0 auto;
padding-left: 1rem; padding-left: 0.625rem;
padding-right: 1rem; padding-right: 0.625rem;
> span {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
} }
> .Transition { > .Transition {

2
src/components/right/Profile.tsx
View File

@ -333,7 +333,7 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
> >
{renderSharedMedia} {renderSharedMedia}
</Transition> </Transition>
<TabList activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} /> <TabList big activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} />
</div> </div>
)} )}
</InfiniteScroll> </InfiniteScroll>

6
src/components/ui/TabList.scss
View File

@ -5,7 +5,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
font-size: 1rem; font-size: .875rem;
flex-wrap: nowrap; flex-wrap: nowrap;
box-shadow: 0 2px 2px var(--color-light-shadow); box-shadow: 0 2px 2px var(--color-light-shadow);
background-color: var(--color-background); background-color: var(--color-background);
@ -15,6 +15,10 @@
scrollbar-width: none; scrollbar-width: none;
scrollbar-color: rgba(0, 0, 0, 0); scrollbar-color: rgba(0, 0, 0, 0);
&.big {
font-size: 1rem;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 0; height: 0;
} }

7
src/components/ui/TabList.tsx
View File

@ -20,12 +20,15 @@ export type TabWithProperties = {
type OwnProps = { type OwnProps = {
tabs: readonly TabWithProperties[]; tabs: readonly TabWithProperties[];
activeTab: number; activeTab: number;
big?: boolean;
onSwitchTab: (index: number) => void; onSwitchTab: (index: number) => void;
}; };
const TAB_SCROLL_THRESHOLD_PX = 16; const TAB_SCROLL_THRESHOLD_PX = 16;
const TabList: FC<OwnProps> = ({ tabs, activeTab, onSwitchTab }) => { const TabList: FC<OwnProps> = ({
tabs, activeTab, big, onSwitchTab,
}) => {
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const previousActiveTab = usePrevious(activeTab); const previousActiveTab = usePrevious(activeTab);
@ -55,7 +58,7 @@ const TabList: FC<OwnProps> = ({ tabs, activeTab, onSwitchTab }) => {
const lang = useLang(); const lang = useLang();
return ( return (
<div className="TabList no-selection no-scrollbar" ref={containerRef}> <div className={`TabList no-selection no-scrollbar ${big ? 'big' : ''}`} ref={containerRef}>
{tabs.map((tab, i) => ( {tabs.map((tab, i) => (
<Tab <Tab
key={tab.title} key={tab.title}