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

more on button refactor (#388)

Browse Source 
- Removed opacity for hover effect. Now uses a brighter variant of color
- Updated other Button usages
This commit is contained in:
Red J Adaya 2024-09-18 13:38:17 +08:00 committed by GitHub
parent f08bc8c768
commit dae72e7009
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 111 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/block/blockframe.tsx
View File

@ -348,9 +348,6 @@ const ConnStatusOverlay = React.memo(
<Button className={reconClassName} onClick={handleTryReconnect}> <Button className={reconClassName} onClick={handleTryReconnect}>
{reconDisplay} {reconDisplay}
</Button> </Button>
{/* <Button className="secondary ghost vertical-padding-5 horizontal-padding-6">
<i className="fa-sharp fa-regular fa-xmark-large"></i>
</Button> */}
</div> </div>
) : null} ) : null}
</div> </div>

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

@ -22,46 +22,45 @@
user-select: none; user-select: none;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
opacity: 0.8; transition: all 0.3s ease;
&:hover {
opacity: 1;
}
&.solid { &.solid {
&.green { &.green {
color: var(--button-green-text-color); color: #000000;
background-color: var(--button-green-bg); background-color: var(--accent-color);
border: 1px solid var(--button-green-border-color); border: 1px solid #29f200;
&:hover { &:hover {
color: var(--button-green-text-color); color: #000000;
background-color: #29f200;
} }
} }
&.grey { &.grey {
background-color: var(--button-grey-bg); background-color: rgba(255, 255, 255, 0.04);
border: 1px solid var(--button-grey-border-color); border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--button-grey-text-color); color: var(--main-text-color);
&:hover { &:hover {
color: var(--button-grey-text-color); color: var(--main-text-color);
background-color: rgba(255, 255, 255, 0.09);
} }
} }
&.red { &.red {
background-color: var(--button-red-bg); background-color: #cc0000;
border: 1px solid var(--button-red-border-color); border: 1px solid #fc3131;
color: var(--button-red-text-color); color: var(--main-text-color);
&:hover { &:hover {
color: var(--button-red-text-color); background-color: #f93939;
} }
} }
&.yellow { &.yellow {
color: var(--button-yellow-text-color); color: #000000;
background-color: var(--button-yellow-bg); background-color: #c4a000;
border: 1px solid var(--button-yellow-border-color); border: 1px solid #fce94f;
&:hover { &:hover {
color: var(--button-yellow-text-color); color: #000000;
background-color: #fce94f;
} }
} }
} }
@ -69,34 +68,38 @@
&.outlined { &.outlined {
background-color: transparent; background-color: transparent;
&.green { &.green {
color: var(--button-green-bg); color: var(--accent-color);
border: 1px solid var(--button-green-bg); border: 1px solid var(--accent-color);
&:hover { &:hover {
color: var(--button-green-bg); color: #29f200;
border: 1px solid #29f200;
} }
} }
&.grey { &.grey {
border: 1px solid var(--button-grey-border-color); border: 1px solid rgba(255, 255, 255, 0.6);
color: var(--button-grey-text-color); color: rgba(255, 255, 255, 0.6);
&:hover { &:hover {
color: var(--button-grey-text-color); color: var(--main-text-color);
border: 1px solid var(--main-text-color);
} }
} }
&.red { &.red {
border: 1px solid var(--button-red-bg); border: 1px solid #cc0000;
color: var(--button-red-bg); color: #cc0000;
&:hover { &:hover {
color: var(--button-red-bg); color: #ff3c3c;
border: 1px solid #ff3c3c;
} }
} }
&.yellow { &.yellow {
color: var(--button-yellow-bg); color: #c4a000;
border: 1px solid var(--button-yellow-bg); border: 1px solid #c4a000;
&:hover { &:hover {
color: var(--button-yellow-bg); color: #fce94f;
border: 1px solid #fce94f;
} }
} }
} }
@ -110,33 +113,33 @@
&.green { &.green {
border: none; border: none;
color: var(--button-green-bg); color: var(--accent-color);
&:hover { &:hover {
color: var(--button-green-bg); color: #29f200;
} }
} }
&.grey { &.grey {
border: none; border: none;
color: var(--button-grey-text-color); color: rgba(255, 255, 255, 0.6);
&:hover { &:hover {
color: var(--button-grey-text-color); color: var(--main-text-color);
} }
} }
&.red { &.red {
border: none; border: none;
color: var(--button-red-bg); color: #cc0000;
&:hover { &:hover {
color: var(--button-red-bg); color: #fc3131;
} }
} }
&.yellow { &.yellow {
border: none; border: none;
color: var(--button-yellow-bg); color: #c4a000;
&:hover { &:hover {
color: var(--button-yellow-bg); color: #fce94f;
} }
} }
} }
@ -148,12 +151,11 @@
&:focus, &:focus,
&.focus { &.focus {
outline: 1px solid var(--button-focus-border-color); outline: 1px solid var(--success-color);
outline-offset: 2px; outline-offset: 2px;
} }
// customs styles here // customs styles here
&.border-radius-2 { &.border-radius-2 {
border-radius: 4px; border-radius: 4px;
} }
@ -178,6 +180,16 @@
border-radius: 10px; border-radius: 10px;
} }
&.vertical-padding-0 {
padding-top: 0px;
padding-bottom: 0px;
}
&.vertical-padding-1 {
padding-top: 1px;
padding-bottom: 1px;
}
&.vertical-padding-2 { &.vertical-padding-2 {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
@ -223,6 +235,16 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
&.horizontal-padding-0 {
padding-left: 0px;
padding-right: 0px;
}
&.horizontal-padding-1 {
padding-left: 1px;
padding-right: 1px;
}
&.horizontal-padding-2 { &.horizontal-padding-2 {
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;

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

@ -1,17 +1,25 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import clsx from "clsx"; import clsx from "clsx";
import { Children, isValidElement, memo } from "react"; import { Children, forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
import "./button.less"; import "./button.less";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
forwardedRef?: React.RefObject<HTMLButtonElement>;
className?: string; className?: string;
children?: React.ReactNode; children?: ReactNode;
target?: string;
source?: string;
} }
const Button = memo(({ className = "", children, disabled, ...props }: ButtonProps) => { const Button = memo(
const hasIcon = Children.toArray(children).some( forwardRef<HTMLButtonElement, ButtonProps>(
(child) => isValidElement(child) && (child as React.ReactElement).type === "svg" ({ children, disabled, source, className = "", ...props }: ButtonProps, ref) => {
); const btnRef = useRef<HTMLButtonElement>(null);
useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
const childrenArray = Children.toArray(children);
// Check if the className contains any of the categories: solid, outlined, or ghost // Check if the className contains any of the categories: solid, outlined, or ghost
const containsButtonCategory = /(solid|outline|ghost)/.test(className); const containsButtonCategory = /(solid|outline|ghost)/.test(className);
@ -25,17 +33,19 @@ const Button = memo(({ className = "", children, disabled, ...props }: ButtonPro
return ( return (
<button <button
ref={btnRef}
tabIndex={disabled ? -1 : 0} tabIndex={disabled ? -1 : 0}
className={clsx("button", finalClassName, { className={clsx("button", finalClassName, {
disabled, disabled,
hasIcon,
})} })}
disabled={disabled} disabled={disabled}
{...props} {...props}
> >
{children} {childrenArray}
</button> </button>
); );
}); }
)
);
export { Button }; export { Button };

16
frontend/app/modals/modal.tsx
View File

@ -10,7 +10,6 @@ import "./modal.less";
interface ModalProps { interface ModalProps {
children?: React.ReactNode; children?: React.ReactNode;
description?: string;
okLabel?: string; okLabel?: string;
cancelLabel?: string; cancelLabel?: string;
className?: string; className?: string;
@ -21,20 +20,7 @@ interface ModalProps {
} }
const Modal = forwardRef<HTMLDivElement, ModalProps>( const Modal = forwardRef<HTMLDivElement, ModalProps>(
( ({ children, className, cancelLabel, okLabel, onCancel, onOk, onClose, onClickBackdrop }: ModalProps, ref) => {
{
children,
className,
description,
cancelLabel,
okLabel,
onCancel,
onOk,
onClose,
onClickBackdrop,
}: ModalProps,
ref
) => {
const renderBackdrop = (onClick) => <div className="modal-backdrop" onClick={onClick}></div>; const renderBackdrop = (onClick) => <div className="modal-backdrop" onClick={onClick}></div>;
const renderFooter = () => { const renderFooter = () => {

4
frontend/app/modals/tos.tsx
View File

@ -117,7 +117,7 @@ const ModalPage1 = () => {
</div> </div>
<footer className="unselectable"> <footer className="unselectable">
<div className="button-wrapper"> <div className="button-wrapper">
<Button className="font-weight-600 primary" onClick={acceptTos}> <Button className="font-weight-600" onClick={acceptTos}>
Continue Continue
</Button> </Button>
</div> </div>
@ -146,7 +146,7 @@ const ModalPage2 = () => {
</div> </div>
<footer className="unselectable"> <footer className="unselectable">
<div className="button-wrapper"> <div className="button-wrapper">
<Button className="font-weight-600 primary" onClick={handleGetStarted}> <Button className="font-weight-600" onClick={handleGetStarted}>
Get Started Get Started
</Button> </Button>
</div> </div>

2
frontend/app/modals/typeaheadmodal.tsx
View File

@ -66,7 +66,7 @@ const Suggestions = forwardRef<HTMLDivElement, SuggestionsProps>(
); );
interface TypeAheadModalProps { interface TypeAheadModalProps {
anchorRef: React.RefObject<HTMLDivElement>; anchorRef: React.RefObject<HTMLElement>;
blockRef?: React.RefObject<HTMLDivElement>; blockRef?: React.RefObject<HTMLDivElement>;
suggestions?: SuggestionsType[]; suggestions?: SuggestionsType[];
label?: string; label?: string;

7
frontend/app/tab/tab.less
View File

@ -35,7 +35,7 @@
} }
.name { .name {
color: white; color: var(--main-text-color);
} }
} }
@ -70,13 +70,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
opacity: 0.5;
z-index: var(--zindex-tab-name); z-index: var(--zindex-tab-name);
padding: 1px 2px; padding: 1px 2px;
&:hover {
opacity: 1;
}
} }
&:hover .close { &:hover .close {

2
frontend/app/tab/tab.tsx
View File

@ -205,7 +205,7 @@ const Tab = React.memo(
> >
{tabData?.name} {tabData?.name}
</div> </div>
<Button className="grey ghost close" onClick={onClose} onMouseDown={handleMouseDownOnClose}> <Button className="ghost grey close" onClick={onClose} onMouseDown={handleMouseDownOnClose}>
<i className="fa fa-solid fa-xmark" /> <i className="fa fa-solid fa-xmark" />
</Button> </Button>
</div> </div>

2
frontend/app/tab/tabbar.tsx
View File

@ -485,7 +485,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
if (appUpdateStatus === "ready") { if (appUpdateStatus === "ready") {
updateAvailableLabel = ( updateAvailableLabel = (
<Button <Button
forwardedRef={updateStatusButtonRef} ref={updateStatusButtonRef}
className="update-available-button" className="update-available-button"
title="Click to Install Update" title="Click to Install Update"
onClick={onUpdateAvailableClick} onClick={onUpdateAvailableClick}

7
frontend/app/view/waveai/waveai.less
View File

@ -126,18 +126,11 @@
border-radius: 100%; border-radius: 100%;
width: 27px; width: 27px;
aspect-ratio: 1 /1; aspect-ratio: 1 /1;
color: var(--block-bg-color);
background-color: var(--main-text-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 0 0 auto; flex: 0 0 auto;
padding: 0; padding: 0;
&:hover,
&:focus {
background-color: var(--grey-text-color);
}
} }
} }
} }