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

Channel Link: Adjust styles for draggable icon (#5732)

Browse Source 
Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>
This commit is contained in:
Alexander Zinchuk 2025-03-21 14:02:12 +04:00
parent d8af6e422d
commit a59ff30064
6 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/ManageUsernames.module.scss
View File

@ -28,14 +28,14 @@
.sortableContainer {
position: relative;
:global(.draggable-knob) {
margin-top: -0.25rem;
}
}
.item {
margin-bottom: 0;
margin-left: -1rem;
margin-right: -1rem;
:global(.multiline-item) {
padding-inline-end: 3rem;
}
}

4
src/components/common/ManageUsernames.tsx
View File

@ -31,7 +31,7 @@ type OwnProps = {
onEditUsername: (username: string) => void;
};
const USERNAME_HEIGHT_PX = 60;
const USERNAME_HEIGHT_PX = 56;
const ManageUsernames: FC<OwnProps> = ({
chatId,
@ -170,7 +170,7 @@ const ManageUsernames: FC<OwnProps> = ({
>
<ListItem
key={usernameData.username}
className={buildClassName('drag-item mb-2 no-icon', styles.item)}
className={buildClassName('drag-item no-icon', styles.item)}
narrow
secondaryIcon="more"
icon={usernameData.isActive ? 'link' : 'link-broken'}

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

@ -91,10 +91,6 @@
position: relative;
}
.settings-sortable-container .draggable-knob {
margin-top: -0.25rem;
}
.settings-sortable-item .multiline-item {
padding-inline-end: 3rem;
}

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

@ -49,7 +49,7 @@ type SortState = {
draggedIndex?: number;
};
const FOLDER_HEIGHT_PX = 68;
const FOLDER_HEIGHT_PX = 56;
const runThrottledForLoadRecommended = throttle((cb) => cb(), 60000, true);
const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
@ -211,7 +211,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
{canCreateNewFolder && (
<Button
// TODO: Refactor button component to handle icon placemenet with props
className="settings-button with-icon mb-2"
className="settings-button with-icon"
color="primary"
size="smaller"
pill
@ -248,7 +248,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
>
<ListItem
key={folder.id}
className="drag-item mb-2 no-icon settings-sortable-item"
className="drag-item no-icon settings-sortable-item"
narrow
inactive
multiline
@ -279,7 +279,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
isDisabled={isBlocked || !isActive}
>
<ListItem
className="drag-item mb-2 no-icon settings-sortable-item"
className="drag-item no-icon settings-sortable-item"
narrow
secondaryIcon="more"
multiline
@ -335,7 +335,6 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
{recommendedChatFolders.map((folder) => (
<ListItem
className="mb-2"
narrow
// eslint-disable-next-line react/jsx-no-bind
onClick={() => handleCreateFolderFromRecommended(folder)}

9
src/components/ui/Draggable.module.scss
View File

@ -19,9 +19,13 @@
.knob {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
color: var(--color-text-secondary);
font-size: 1.25rem;
line-height: 1.75;
@ -30,7 +34,6 @@
transition: opacity 150ms;
cursor: grab !important;
transform: translateY(-50%);
.container:hover & {
opacity: 1;
@ -46,3 +49,7 @@
touch-action: none;
}
}
.icon {
font-size: 1.5rem;
}

2
src/components/ui/Draggable.tsx
View File

@ -164,7 +164,7 @@ const Draggable: FC<OwnProps> = ({
onTouchStart={handleMouseDown}
style={knobStyle}
>
<Icon name="sort" />
<Icon name="sort" className={styles.icon} />
</div>
)}
</div>