ouyang/cherry-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from teojs/feat/selection-assistant-mac-version

Browse Source 
feat(SelectionToolbar): enhance styling and layout of selection toolbar
This commit is contained in:
fullex
2025-06-28 21:12:06 +08:00
committed by GitHub
parent b1c8811622 6e3079c1ae
commit 501c352d8b
2 changed files with 47 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/assets/styles/selection-toolbar.scss
+28 -11
View File
@@ -18,25 +18,37 @@ html {
--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
--selection-toolbar-logo-border-width: 0.5px 0 0.5px 0.5px; // default: none
--selection-toolbar-logo-border-style: solid; // default: none
--selection-toolbar-logo-border-color: rgba(255, 255, 255, 0.2);
--selection-toolbar-logo-margin: 0; // default: 0
--selection-toolbar-logo-padding: 0 8px; // default: 0 8px
--selection-toolbar-logo-background: transparent; // default: transparent
// 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-padding: 0; // default: 0
--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-border-radius: 10px;
--selection-toolbar-border: none;
--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-buttons-border-width: 0.5px 0.5px 0.5px 0;
--selection-toolbar-buttons-border-style: solid;
--selection-toolbar-buttons-border-color: rgba(255, 255, 255, 0.2);
--selection-toolbar-buttons-border-radius: 0 var(--selection-toolbar-border-radius)
var(--selection-toolbar-border-radius) 0;
--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-direction: row; // default: row | column
--selection-toolbar-button-text-margin: 0 0 0 0; // default: 0 0 0 0
--selection-toolbar-button-margin: 0; // default: 0
--selection-toolbar-button-padding: 0 8px; // default: 0 8px
--selection-toolbar-button-last-padding: 0 12px 0 8px;
--selection-toolbar-button-border-radius: 0; // default: 0
--selection-toolbar-button-border: none; // default: none
--selection-toolbar-button-box-shadow: none; // default: none
@@ -45,14 +57,19 @@ html {
--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;
--selection-toolbar-button-bgcolor-hover: #333333;
}
[theme-mode='light'] {
--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-border: none;
--selection-toolbar-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.1);
--selection-toolbar-background: rgba(245, 245, 245, 0.95);
// Buttons
--selection-toolbar-buttons-border-color: rgba(0, 0, 0, 0.08);
--selection-toolbar-logo-border-color: rgba(0, 0, 0, 0.08);
--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);
src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
+19 -3
View File
@@ -259,7 +259,7 @@ const SelectionToolbar: FC<{ demo?: boolean }> = ({ demo = false }) => {
const Container = styled.div`
display: inline-flex;
flex-direction: row;
align-items: center;
align-items: stretch;
height: var(--selection-toolbar-height);
border-radius: var(--selection-toolbar-border-radius);
border: var(--selection-toolbar-border);
@@ -269,6 +269,7 @@ const Container = styled.div`
margin: var(--selection-toolbar-margin) !important;
user-select: none;
box-sizing: border-box;
overflow: hidden;
`
const LogoWrapper = styled.div<{ $draggable: boolean }>`
@@ -276,7 +277,12 @@ const LogoWrapper = styled.div<{ $draggable: boolean }>`
align-items: center;
justify-content: center;
margin: var(--selection-toolbar-logo-margin);
background-color: transparent;
padding: var(--selection-toolbar-logo-padding);
background-color: var(--selection-toolbar-logo-background);
border-width: var(--selection-toolbar-logo-border-width);
border-style: var(--selection-toolbar-logo-border-style);
border-color: var(--selection-toolbar-logo-border-color);
border-radius: var(--selection-toolbar-border-radius) 0 0 var(--selection-toolbar-border-radius);
${({ $draggable }) => $draggable && ' -webkit-app-region: drag;'};
`
@@ -307,14 +313,19 @@ const ActionWrapper = styled.div`
flex-direction: row;
align-items: center;
justify-content: center;
margin-left: 3px;
background-color: transparent;
border-width: var(--selection-toolbar-buttons-border-width);
border-style: var(--selection-toolbar-buttons-border-style);
border-color: var(--selection-toolbar-buttons-border-color);
border-radius: var(--selection-toolbar-buttons-border-radius);
`
const ActionButton = styled.div`
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2px;
cursor: pointer !important;
margin: var(--selection-toolbar-button-margin);
padding: var(--selection-toolbar-button-padding);
@@ -324,6 +335,10 @@ const ActionButton = styled.div`
box-shadow: var(--selection-toolbar-button-box-shadow);
transition: all 0.1s ease-in-out;
will-change: color, background-color;
&:last-child {
border-radius: 0 var(--selection-toolbar-border-radius) var(--selection-toolbar-border-radius) 0;
padding: var(--selection-toolbar-button-last-padding);
}
.btn-icon {
width: var(--selection-toolbar-button-icon-size);
@@ -337,6 +352,7 @@ const ActionButton = styled.div`
color: var(--selection-toolbar-button-text-color);
transition: color 0.1s ease-in-out;
will-change: color;
line-height: 1.1;
}
&:hover {
.btn-icon {