Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-08 00:21:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

button refactor (#372)

Browse Source
This commit is contained in:
Red J Adaya 2024-09-13 13:22:31 +08:00 committed by GitHub
parent b3f7e7a2b9
commit 04924870c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 119 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
frontend/app/element/button.less
View File

@ -2,200 +2,219 @@
/* SPDX-License-Identifier: Apache-2.0 */ /* SPDX-License-Identifier: Apache-2.0 */
.button { .button {
padding: 1px; // override default button appearance
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 8px; outline: 1px solid transparent;
&:focus, background: var(--accent-color);
&.focus { border: none;
border: 1px solid var(--button-focus-border-color); cursor: pointer;
outline: inherit;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 20px;
padding-right: 20px;
align-items: center;
gap: 4px;
border-radius: 6px;
height: auto;
line-height: 16px;
white-space: nowrap;
user-select: none;
font-size: 14px;
color: var(--button-text-color);
font-weight: normal;
i {
fill: var(--main-text-color);
} }
.button-inner { &.primary,
&.secondary {
background: var(--accent-color); background: var(--accent-color);
border: none;
cursor: pointer;
outline: inherit;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 20px;
padding-right: 20px;
align-items: center;
gap: 4px;
border-radius: 6px;
height: auto;
line-height: 16px;
white-space: nowrap;
user-select: none;
font-size: 14px;
color: var(--button-text-color);
font-weight: normal;
i { i {
fill: var(--main-text-color); fill: var(--main-text-color);
} }
}
&.primary, &.primary.danger {
&.secondary { background: var(--error-color);
background: var(--accent-color); }
i { &.primary.warning {
fill: var(--main-text-color); background: #e6ba1e;
} }
&.primary.ghost {
background: none;
i {
fill: var(--accent-color);
} }
}
&.primary.danger { &.primary.ghost.danger {
background: var(--error-color); i {
fill: var(--app-error-color);
} }
}
&.primary.warning { &.secondary,
background: #e6ba1e; &.link-button {
} background: var(--highlight-bg-color);
}
&.primary.ghost { &.secondary.ghost {
background: none; background: none;
}
i { &.secondary.danger {
fill: var(--accent-color); color: var(--error-color);
} }
}
&.primary.ghost.danger { &.outlined {
i { background: none;
fill: var(--app-error-color); border: 1px solid rgba(255, 255, 255, 0.5);
} }
}
&.secondary, &.disabled {
&.link-button { opacity: 0.5;
background: var(--highlight-bg-color); }
}
&.secondary.ghost { &:focus,
background: none; &.focus {
} outline: 1px solid var(--button-focus-border-color);
outline-offset: 2px;
&.secondary.danger {
color: var(--error-color);
}
&.outlined {
background: none;
border: 1px solid rgba(255, 255, 255, 0.5);
}
&.disabled {
opacity: 0.5;
}
} }
/* /*
* customs styles here * customs styles here
*/ */
.border-radius-4 { &.border-radius-2 {
border-radius: 4px; border-radius: 4px;
} }
.vertical-padding-2 { &.border-radius-3 {
border-radius: 4px;
}
&.border-radius-4 {
border-radius: 4px;
}
&.border-radius-5 {
border-radius: 4px;
}
&.border-radius-6 {
border-radius: 4px;
}
&.border-radius-10 {
border-radius: 10px;
}
&.vertical-padding-2 {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
} }
.vertical-padding-3 { &.vertical-padding-3 {
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
} }
.vertical-padding-4 { &.vertical-padding-4 {
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
} }
.vertical-padding-5 { &.vertical-padding-5 {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
} }
.vertical-padding-6 { &.vertical-padding-6 {
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
} }
.vertical-padding-7 { &.vertical-padding-7 {
padding-top: 7px; padding-top: 7px;
padding-bottom: 7px; padding-bottom: 7px;
} }
.vertical-padding-8 { &.vertical-padding-8 {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
} }
.vertical-padding-9 { &.vertical-padding-9 {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.vertical-padding-10 { &.vertical-padding-10 {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.horizontal-padding-2 { &.horizontal-padding-2 {
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }
.horizontal-padding-3 { &.horizontal-padding-3 {
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
} }
.horizontal-padding-4 { &.horizontal-padding-4 {
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
} }
.horizontal-padding-5 { &.horizontal-padding-5 {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.horizontal-padding-6 { &.horizontal-padding-6 {
padding-left: 6px; padding-left: 6px;
padding-right: 6px; padding-right: 6px;
} }
.horizontal-padding-7 { &.horizontal-padding-7 {
padding-left: 7px; padding-left: 7px;
padding-right: 7px; padding-right: 7px;
} }
.horizontal-padding-8 { &.horizontal-padding-8 {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
} }
.horizontal-padding-9 { &.horizontal-padding-9 {
padding-left: 9px; padding-left: 9px;
padding-right: 9px; padding-right: 9px;
} }
.horizontal-padding-10 { &.horizontal-padding-10 {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
.font-size-11 { &.font-size-11 {
font-size: 11px; font-size: 11px;
} }
.font-weight-500 { &.font-weight-500 {
font-weight: 500; font-weight: 500;
} }
.font-weight-600 { &.font-weight-600 {
font-weight: 500; font-weight: 600;
} }
} }

23
frontend/app/element/button.tsx
View File

@ -17,18 +17,17 @@ const Button = React.memo(({ className = "primary", children, disabled, ...props
); );
return ( return (
<div className="button"> <button
<button tabIndex={disabled ? -1 : 0}
className={clsx("button-inner", className, { className={clsx("button", className, {
disabled, disabled,
hasIcon, hasIcon,
})} })}
disabled={disabled} disabled={disabled}
{...props} {...props}
> >
{children} {children}
</button> </button>
</div>
); );
}); });