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

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

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