Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-23 18:10:26 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(SelectionAssistant): make all Toolbar CSS variables customizable (#7532)

Browse Source 
refactor: update selection toolbar styles and structure

- Enhanced the selection toolbar's HTML structure for better readability.
- Updated CSS variables for improved theming and consistency across the toolbar.
- Refactored the styled components in SelectionToolbar.tsx to utilize new CSS variables for layout and styling.
- Added support for hover states and improved button styling for better user experience.
This commit is contained in:
fullex 2025-06-26 10:17:09 +08:00 committed by GitHub
parent 751879d42e
commit 1f09c8a022
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 110 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/renderer/selectionToolbar.html
View File

@ -15,15 +15,18 @@
<script type="module" src="/src/windows/selection/toolbar/entryPoint.tsx"></script>
<style>
html {
margin: 0;
margin: 0 !important;
background-color: transparent !important;
background-image: none !important;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
width: 100vw !important;
height: 100vh !important;
-webkit-user-select: none;
-moz-user-select: none;
@ -32,8 +35,8 @@
}
#root {
margin: 0;
padding: 0;
margin: 0 !important;
padding: 0 !important;
width: max-content !important;
height: fit-content !important;
}

59
src/renderer/src/assets/styles/selection-toolbar.scss
View File

@ -5,22 +5,57 @@ html {
}
:root {
--color-selection-toolbar-background: rgba(20, 20, 20, 0.95);
--color-selection-toolbar-border: rgba(55, 55, 55, 0.5);
--color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3);
--color-selection-toolbar-text: rgba(255, 255, 245, 0.9);
--color-selection-toolbar-hover-bg: #222222;
// Basic Colors
--color-primary: #00b96b;
--color-error: #f44336;
--selection-toolbar-color-primary: var(--color-primary);
--selection-toolbar-color-error: var(--color-error);
// Toolbar
--selection-toolbar-height: 36px; // default: 36px max: 42px
--selection-toolbar-font-size: 14px; // default: 14px
--selection-toolbar-logo-display: flex; // values: flex | none
--selection-toolbar-logo-size: 22px; // default: 22px
--selection-toolbar-logo-margin: 0 0 0 5px; // default: 0 0 05px
// DO NOT MODIFY THESE VALUES, IF YOU DON'T KNOW WHAT YOU ARE DOING
--selection-toolbar-padding: 2px 4px 2px 2px; // default: 2px 4px 2px 2px
--selection-toolbar-margin: 2px 3px 5px 3px; // default: 2px 3px 5px 3px
// ------------------------------------------------------------
--selection-toolbar-border-radius: 6px;
--selection-toolbar-border: 1px solid rgba(55, 55, 55, 0.5);
--selection-toolbar-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.3);
--selection-toolbar-background: rgba(20, 20, 20, 0.95);
// Buttons
--selection-toolbar-button-icon-size: 16px; // default: 16px
--selection-toolbar-button-text-margin: 0 0 0 3px; // default: 0 0 0 3px
--selection-toolbar-button-margin: 0 2px; // default: 0 2px
--selection-toolbar-button-padding: 4px 6px; // default: 4px 6px
--selection-toolbar-button-border-radius: 4px; // default: 4px
--selection-toolbar-button-border: none; // default: none
--selection-toolbar-button-box-shadow: none; // default: none
--selection-toolbar-button-text-color: rgba(255, 255, 245, 0.9);
--selection-toolbar-button-icon-color: var(--selection-toolbar-button-text-color);
--selection-toolbar-button-text-color-hover: var(--selection-toolbar-color-primary);
--selection-toolbar-button-icon-color-hover: var(--selection-toolbar-color-primary);
--selection-toolbar-button-bgcolor: transparent; // default: transparent
--selection-toolbar-button-bgcolor-hover: #222222;
}
[theme-mode='light'] {
--color-selection-toolbar-background: rgba(245, 245, 245, 0.95);
--color-selection-toolbar-border: rgba(200, 200, 200, 0.5);
--color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3);
--selection-toolbar-border: 1px solid rgba(200, 200, 200, 0.5);
--selection-toolbar-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.3);
--selection-toolbar-background: rgba(245, 245, 245, 0.95);
--color-selection-toolbar-text: rgba(0, 0, 0, 1);
--color-selection-toolbar-hover-bg: rgba(0, 0, 0, 0.04);
--selection-toolbar-button-text-color: rgba(0, 0, 0, 1);
--selection-toolbar-button-icon-color: var(--selection-toolbar-button-text-color);
--selection-toolbar-button-text-color-hover: var(--selection-toolbar-color-primary);
--selection-toolbar-button-icon-color-hover: var(--selection-toolbar-color-primary);
--selection-toolbar-button-bgcolor-hover: rgba(0, 0, 0, 0.04);
}

65
src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
View File

@ -260,32 +260,29 @@ const Container = styled.div`
display: inline-flex;
flex-direction: row;
align-items: center;
border-radius: 6px;
background-color: var(--color-selection-toolbar-background);
border-color: var(--color-selection-toolbar-border);
box-shadow: 0px 2px 3px var(--color-selection-toolbar-shadow);
padding: 2px;
margin: 2px 3px 5px 3px;
height: var(--selection-toolbar-height);
border-radius: var(--selection-toolbar-border-radius);
border: var(--selection-toolbar-border);
box-shadow: var(--selection-toolbar-box-shadow);
background: var(--selection-toolbar-background);
padding: var(--selection-toolbar-padding) !important;
margin: var(--selection-toolbar-margin) !important;
user-select: none;
border-width: 1px;
border-style: solid;
height: 36px;
padding-right: 4px;
box-sizing: border-box;
`
const LogoWrapper = styled.div<{ $draggable: boolean }>`
display: flex;
display: var(--selection-toolbar-logo-display);
align-items: center;
justify-content: center;
margin-left: 5px;
margin: var(--selection-toolbar-logo-margin);
background-color: transparent;
${({ $draggable }) => $draggable && ' -webkit-app-region: drag;'}
`
const Logo = styled(Avatar)`
height: 22px;
width: 22px;
height: var(--selection-toolbar-logo-size);
width: var(--selection-toolbar-logo-size);
&.animate {
animation: rotate 1s ease;
}
@ -318,37 +315,37 @@ const ActionButton = styled.div`
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0 2px;
background-color: transparent;
cursor: pointer;
border-radius: 4px;
padding: 4px 6px;
cursor: pointer !important;
margin: var(--selection-toolbar-button-margin);
padding: var(--selection-toolbar-button-padding);
background-color: var(--selection-toolbar-button-bgcolor);
border-radius: var(--selection-toolbar-button-border-radius);
border: var(--selection-toolbar-button-border);
box-shadow: var(--selection-toolbar-button-box-shadow);
transition: all 0.1s ease-in-out;
will-change: color, background-color;
.btn-icon {
width: 16px;
height: 16px;
color: var(--color-selection-toolbar-text);
width: var(--selection-toolbar-button-icon-size);
height: var(--selection-toolbar-button-icon-size);
color: var(--selection-toolbar-button-icon-color);
background-color: transparent;
transition: color 0.1s ease-in-out;
will-change: color;
}
.btn-title {
color: var(--color-selection-toolbar-text);
--font-size: 14px;
color: var(--selection-toolbar-button-text-color);
transition: color 0.1s ease-in-out;
will-change: color;
}
&:hover {
color: var(--color-primary);
.btn-icon {
color: var(--color-primary);
color: var(--selection-toolbar-button-icon-color-hover);
}
.btn-title {
color: var(--color-primary);
color: var(--selection-toolbar-button-text-color-hover);
}
background-color: var(--color-selection-toolbar-hover-bg);
background-color: var(--selection-toolbar-button-bgcolor-hover);
}
`
const ActionIcon = styled.div`
@ -356,8 +353,8 @@ const ActionIcon = styled.div`
align-items: center;
justify-content: center;
position: relative;
height: 16px;
width: 16px;
height: var(--selection-toolbar-button-icon-size);
width: var(--selection-toolbar-button-icon-size);
background-color: transparent;
.btn-icon {
@ -372,11 +369,11 @@ const ActionIcon = styled.div`
}
.icon-fail {
color: var(--color-error);
color: var(--selection-toolbar-color-error);
}
.icon-success {
color: var(--color-primary);
color: var(--selection-toolbar-color-primary);
}
.icon-scale-in {
@ -436,12 +433,12 @@ const ActionIcon = styled.div`
}
`
const ActionTitle = styled.span`
font-size: 14px;
font-size: var(--selection-toolbar-font-size);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 3px;
margin: var(--selection-toolbar-button-text-margin);
background-color: transparent;
`