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}>
{reconDisplay}
</Button>
{/* <Button className="secondary ghost vertical-padding-5 horizontal-padding-6">
<i className="fa-sharp fa-regular fa-xmark-large"></i>
</Button> */}
</div>
) : null}
</div>

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

@ -22,46 +22,45 @@
user-select: none;
font-size: 14px;
font-weight: normal;
opacity: 0.8;
&:hover {
opacity: 1;
}
transition: all 0.3s ease;
&.solid {
&.green {
color: var(--button-green-text-color);
background-color: var(--button-green-bg);
border: 1px solid var(--button-green-border-color);
color: #000000;
background-color: var(--accent-color);
border: 1px solid #29f200;
&:hover {
color: var(--button-green-text-color);
color: #000000;
background-color: #29f200;
}
}
&.grey {
background-color: var(--button-grey-bg);
border: 1px solid var(--button-grey-border-color);
color: var(--button-grey-text-color);
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--main-text-color);
&:hover {
color: var(--button-grey-text-color);
color: var(--main-text-color);
background-color: rgba(255, 255, 255, 0.09);
}
}
&.red {
background-color: var(--button-red-bg);
border: 1px solid var(--button-red-border-color);
color: var(--button-red-text-color);
background-color: #cc0000;
border: 1px solid #fc3131;
color: var(--main-text-color);
&:hover {
color: var(--button-red-text-color);
background-color: #f93939;
}
}
&.yellow {
color: var(--button-yellow-text-color);
background-color: var(--button-yellow-bg);
border: 1px solid var(--button-yellow-border-color);
color: #000000;
background-color: #c4a000;
border: 1px solid #fce94f;
&:hover {
color: var(--button-yellow-text-color);
color: #000000;
background-color: #fce94f;
}
}
}
@ -69,34 +68,38 @@
&.outlined {
background-color: transparent;
&.green {
color: var(--button-green-bg);
border: 1px solid var(--button-green-bg);
color: var(--accent-color);
border: 1px solid var(--accent-color);
&:hover {
color: var(--button-green-bg);
color: #29f200;
border: 1px solid #29f200;
}
}
&.grey {
border: 1px solid var(--button-grey-border-color);
color: var(--button-grey-text-color);
border: 1px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6);
&:hover {
color: var(--button-grey-text-color);
color: var(--main-text-color);
border: 1px solid var(--main-text-color);
}
}
&.red {
border: 1px solid var(--button-red-bg);
color: var(--button-red-bg);
border: 1px solid #cc0000;
color: #cc0000;
&:hover {
color: var(--button-red-bg);
color: #ff3c3c;
border: 1px solid #ff3c3c;
}
}
&.yellow {
color: var(--button-yellow-bg);
border: 1px solid var(--button-yellow-bg);
color: #c4a000;
border: 1px solid #c4a000;
&:hover {
color: var(--button-yellow-bg);
color: #fce94f;
border: 1px solid #fce94f;
}
}
}
@ -110,33 +113,33 @@
&.green {
border: none;
color: var(--button-green-bg);
color: var(--accent-color);
&:hover {
color: var(--button-green-bg);
color: #29f200;
}
}
&.grey {
border: none;
color: var(--button-grey-text-color);
color: rgba(255, 255, 255, 0.6);
&:hover {
color: var(--button-grey-text-color);
color: var(--main-text-color);
}
}
&.red {
border: none;
color: var(--button-red-bg);
color: #cc0000;
&:hover {
color: var(--button-red-bg);
color: #fc3131;
}
}
&.yellow {
border: none;
color: var(--button-yellow-bg);
color: #c4a000;
&:hover {
color: var(--button-yellow-bg);
color: #fce94f;
}
}
}
@ -148,12 +151,11 @@
&:focus,
&.focus {
outline: 1px solid var(--button-focus-border-color);
outline: 1px solid var(--success-color);
outline-offset: 2px;
}
// customs styles here
&.border-radius-2 {
border-radius: 4px;
}
@ -178,6 +180,16 @@
border-radius: 10px;
}
&.vertical-padding-0 {
padding-top: 0px;
padding-bottom: 0px;
}
&.vertical-padding-1 {
padding-top: 1px;
padding-bottom: 1px;
}
&.vertical-padding-2 {
padding-top: 2px;
padding-bottom: 2px;
@ -223,6 +235,16 @@
padding-bottom: 10px;
}
&.horizontal-padding-0 {
padding-left: 0px;
padding-right: 0px;
}
&.horizontal-padding-1 {
padding-left: 1px;
padding-right: 1px;
}
&.horizontal-padding-2 {
padding-left: 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 { Children, isValidElement, memo } from "react";
import { Children, forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
import "./button.less";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
forwardedRef?: React.RefObject<HTMLButtonElement>;
className?: string;
children?: React.ReactNode;
children?: ReactNode;
target?: string;
source?: string;
}
const Button = memo(({ className = "", children, disabled, ...props }: ButtonProps) => {
const hasIcon = Children.toArray(children).some(
(child) => isValidElement(child) && (child as React.ReactElement).type === "svg"
);
const Button = memo(
forwardRef<HTMLButtonElement, ButtonProps>(
({ 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
const containsButtonCategory = /(solid|outline|ghost)/.test(className);
@ -25,17 +33,19 @@ const Button = memo(({ className = "", children, disabled, ...props }: ButtonPro
return (
<button
ref={btnRef}
tabIndex={disabled ? -1 : 0}
className={clsx("button", finalClassName, {
disabled,
hasIcon,
})}
disabled={disabled}
{...props}
>
{children}
{childrenArray}
</button>
);
});
}
)
);
export { Button };

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

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

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

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

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

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

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

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

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

@ -205,7 +205,7 @@ const Tab = React.memo(
>
{tabData?.name}
</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" />
</Button>
</div>

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

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

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

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