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

Settings: Fix color picker on small panel sizes (#6360)

Browse Source 
Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>
This commit is contained in:
Alexander Zinchuk 2025-10-15 19:57:13 +02:00
parent 730944e988
commit ff0d9edc73
2 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/left/settings/folders/SettingsFolders.scss
View File

@ -118,24 +118,40 @@
} }
.color-picker { .color-picker {
overflow-x: auto;
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
align-items: center; align-items: center;
min-height: 3rem; margin-inline: 1rem;
padding: 0 1rem 1rem; padding: 0.125rem;
}
.color-picker-header {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: space-between;
padding-inline-end: 1rem;
}
.color-picker-title-text,
.color-picker-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.color-picker-title { .color-picker-title {
display: flex; flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding-inline-end: 1rem;
} }
.color-picker-item { .color-picker-item {
cursor: pointer; cursor: pointer;
flex-shrink: 0;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
border: 0.125rem solid transparent; border: 0.125rem solid transparent;
@ -175,6 +191,7 @@
&:hover, &:hover,
&:active { &:active {
border: 0.125rem solid var(--color-background); border: 0.125rem solid var(--color-background);
outline: none;
box-shadow: 0 0 0 0.125rem currentColor; box-shadow: 0 0 0 0.125rem currentColor;
} }
} }

9
src/components/left/settings/folders/SettingsFoldersEdit.tsx
View File

@ -356,9 +356,10 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
)} )}
<div className="settings-item pt-3"> <div className="settings-item pt-3">
<h4 className="settings-item-header mb-3 color-picker-title" dir={lang.isRtl ? 'rtl' : undefined}> <h4 className="settings-item-header mb-3 color-picker-header" dir={lang.isRtl ? 'rtl' : undefined}>
{lang('FilterColorTitle')} <span className="color-picker-title-text">{lang('FilterColorTitle')}</span>
<div className={buildClassName( <div className={buildClassName(
'color-picker-title',
'color-picker-selected-color', 'color-picker-selected-color',
isCurrentUserPremium && state.folder.color !== undefined && state.folder.color !== -1 isCurrentUserPremium && state.folder.color !== undefined && state.folder.color !== -1
? getApiPeerColorClass({ color: state.folder.color }) ? getApiPeerColorClass({ color: state.folder.color })
@ -372,7 +373,7 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
})} })}
</div> </div>
</h4> </h4>
<div className="color-picker"> <div className="color-picker custom-scroll-x">
{FOLDER_COLORS.map((color) => ( {FOLDER_COLORS.map((color) => (
<button <button
key={color} key={color}
@ -417,7 +418,7 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
)} )}
</button> </button>
</div> </div>
<p className="settings-item-description mb-0" dir={lang.isRtl ? 'rtl' : undefined}> <p className="settings-item-description mb-0 mt-3" dir={lang.isRtl ? 'rtl' : undefined}>
{lang('FilterColorHint')} {lang('FilterColorHint')}
</p> </p>
</div> </div>