mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-21 21:32:13 +01:00
Switch from Less to Scss (#1335)
Less hasn't received an update in over a year and the parser is missing some modern syntax like relative colors so this switches us to scss
This commit is contained in:
Evan Simkowitz
GitHub
parent
59c570ddcf
commit
2e91ee843c
@ -3,9 +3,9 @@ import type { Preview } from "@storybook/react";
|
||||
import React from "react";
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import "../frontend/app/theme.less";
|
||||
import "../frontend/app/app.less";
|
||||
import "../frontend/app/reset.less";
|
||||
import "../frontend/app/theme.scss";
|
||||
import "../frontend/app/app.scss";
|
||||
import "../frontend/app/reset.scss";
|
||||
import "./global.css";
|
||||
import { light, dark } from "./theme";
|
||||
import { DocsContainer } from "@storybook/addon-docs";
|
||||
|
||||
@ -30,6 +30,13 @@ export default defineConfig({
|
||||
"process.env.WS_NO_BUFFER_UTIL": "true",
|
||||
"process.env.WS_NO_UTF_8_VALIDATE": "true",
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
api: "modern-compiler", // or "modern"
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
preload: {
|
||||
root: ".",
|
||||
@ -76,5 +83,12 @@ export default defineConfig({
|
||||
targets: [{ src: "node_modules/monaco-editor/min/vs/*", dest: "monaco" }],
|
||||
}),
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
api: "modern-compiler", // or "modern"
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "./reset.less";
|
||||
@import "./theme.less";
|
||||
@use "reset.scss";
|
||||
@use "theme.scss";
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
@ -27,7 +27,7 @@ import { AppBackground } from "./app-bg";
|
||||
import { CenteredDiv } from "./element/quickelems";
|
||||
import { NotificationBubbles } from "./notification/notificationbubbles";
|
||||
|
||||
import "./app.less";
|
||||
import "./app.scss";
|
||||
|
||||
const dlog = debug("wave:app");
|
||||
const focusLog = debug("wave:focus");
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.block {
|
||||
display: flex;
|
||||
@ -118,7 +118,7 @@
|
||||
}
|
||||
|
||||
.block-frame-text {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
font: var(--fixed-font);
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
@ -324,7 +324,7 @@
|
||||
}
|
||||
|
||||
.connstatus-status {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@ -333,7 +333,7 @@
|
||||
width: 100%;
|
||||
|
||||
.connstatus-status-text {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
max-width: 100%;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
@ -344,7 +344,7 @@
|
||||
}
|
||||
|
||||
.connstatus-error {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
width: 94%;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
@ -34,7 +34,7 @@ import { WebView, WebViewModel, makeWebViewModel } from "@/view/webview/webview"
|
||||
import clsx from "clsx";
|
||||
import { atom, useAtomValue } from "jotai";
|
||||
import { Suspense, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import "./block.less";
|
||||
import "./block.scss";
|
||||
import { BlockFrame } from "./blockframe";
|
||||
import { blockViewToIcon, blockViewToName } from "./blockutil";
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
@ -53,5 +53,5 @@
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-dims-mixin();
|
||||
@include mixins.avatar-dims-mixin();
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
import { memo } from "react";
|
||||
|
||||
import clsx from "clsx";
|
||||
import "./avatar.less";
|
||||
import "./avatar.scss";
|
||||
|
||||
interface AvatarProps {
|
||||
name: string;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.button {
|
||||
// override default button appearance
|
||||
@ -158,9 +158,9 @@
|
||||
}
|
||||
|
||||
// Include mixins
|
||||
.border-radius-mixin();
|
||||
.vertical-padding-mixin();
|
||||
.horizontal-padding-mixin();
|
||||
.font-size-mixin();
|
||||
.font-weight-mixin();
|
||||
@include mixins.border-radius-mixin();
|
||||
@include mixins.vertical-padding-mixin();
|
||||
@include mixins.horizontal-padding-mixin();
|
||||
@include mixins.font-size-mixin();
|
||||
@include mixins.font-weight-mixin();
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
import clsx from "clsx";
|
||||
import { forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
|
||||
|
||||
import "./button.less";
|
||||
import "./button.scss";
|
||||
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
className?: string;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.collapsible-menu {
|
||||
list-style: none;
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.collapsible-menu-item-text {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import clsx from "clsx";
|
||||
import React, { memo, useState } from "react";
|
||||
import "./collapsiblemenu.less";
|
||||
import "./collapsiblemenu.scss";
|
||||
|
||||
interface VerticalNavProps {
|
||||
items: MenuItem[];
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import { clsx } from "clsx";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import "./copybutton.less";
|
||||
import "./copybutton.scss";
|
||||
import { IconButton } from "./iconbutton";
|
||||
|
||||
type CopyButtonProps = {
|
||||
|
||||
@ -8,7 +8,7 @@ import { Button } from "./button";
|
||||
import { Input, InputGroup, InputLeftElement } from "./input";
|
||||
import { Popover, PopoverButton, PopoverContent } from "./popover";
|
||||
|
||||
import "./emojipalette.less";
|
||||
import "./emojipalette.scss";
|
||||
|
||||
type EmojiItem = { emoji: string; name: string };
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.expandable-menu {
|
||||
display: flex;
|
||||
@ -20,7 +20,7 @@
|
||||
border-radius: 4px;
|
||||
|
||||
.label {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import { clsx } from "clsx";
|
||||
import { atom, useAtom } from "jotai";
|
||||
import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useRef } from "react";
|
||||
|
||||
import "./expandablemenu.less";
|
||||
import "./expandablemenu.scss";
|
||||
|
||||
// Define the global atom for managing open groups
|
||||
const openGroupsAtom = atom<{ [key: string]: boolean }>({});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
@ -38,7 +38,7 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.label {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@ import clsx from "clsx";
|
||||
import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import "./flyoutmenu.less";
|
||||
import "./flyoutmenu.scss";
|
||||
|
||||
type MenuProps = {
|
||||
items: MenuItem[];
|
||||
|
||||
@ -5,7 +5,7 @@ import { useLongClick } from "@/app/hook/useLongClick";
|
||||
import { makeIconClass } from "@/util/util";
|
||||
import clsx from "clsx";
|
||||
import { memo, useRef } from "react";
|
||||
import "./iconbutton.less";
|
||||
import "./iconbutton.scss";
|
||||
|
||||
export const IconButton = memo(({ decl, className }: { decl: IconButtonDecl; className?: string }) => {
|
||||
const buttonRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
@ -28,11 +28,11 @@
|
||||
}
|
||||
|
||||
// Include mixins
|
||||
.border-radius-mixin();
|
||||
.vertical-padding-mixin();
|
||||
.horizontal-padding-mixin();
|
||||
.font-size-mixin();
|
||||
.font-weight-mixin();
|
||||
@include mixins.border-radius-mixin();
|
||||
@include mixins.vertical-padding-mixin();
|
||||
@include mixins.horizontal-padding-mixin();
|
||||
@include mixins.font-size-mixin();
|
||||
@include mixins.font-weight-mixin();
|
||||
}
|
||||
|
||||
/* Styles when an InputGroup is present */
|
||||
@ -87,7 +87,7 @@
|
||||
}
|
||||
|
||||
// Include mixins
|
||||
.border-radius-mixin();
|
||||
.font-size-mixin();
|
||||
.font-weight-mixin();
|
||||
@include mixins.border-radius-mixin();
|
||||
@include mixins.font-size-mixin();
|
||||
@include mixins.font-weight-mixin();
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
import clsx from "clsx";
|
||||
import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
|
||||
|
||||
import "./input.less";
|
||||
import "./input.scss";
|
||||
|
||||
interface InputGroupProps {
|
||||
children: React.ReactNode;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
&.link-button {
|
||||
text-decoration: none;
|
||||
.link-button {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
import { clsx } from "clsx";
|
||||
import * as React from "react";
|
||||
|
||||
import "./linkbutton.less";
|
||||
import "./linkbutton.scss";
|
||||
|
||||
interface LinkButtonProps {
|
||||
href: string;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import clsx from "clsx";
|
||||
import MagnifySVG from "../asset/magnify.svg";
|
||||
import "./magnify.less";
|
||||
import "./magnify.scss";
|
||||
|
||||
interface MagnifyIconProps {
|
||||
enabled: boolean;
|
||||
|
||||
@ -21,7 +21,7 @@ import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { openLink } from "../store/global";
|
||||
import { IconButton } from "./iconbutton";
|
||||
import "./markdown.less";
|
||||
import "./markdown.scss";
|
||||
|
||||
const Link = ({
|
||||
setFocusedHeading,
|
||||
|
||||
@ -2,7 +2,7 @@ import clsx from "clsx";
|
||||
import { memo, useState } from "react";
|
||||
import { Button } from "./button";
|
||||
import { FlyoutMenu } from "./flyoutmenu";
|
||||
import "./menubutton.less";
|
||||
import "./menubutton.scss";
|
||||
|
||||
const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import { Button } from "@/element/button";
|
||||
import React from "react";
|
||||
|
||||
import "./modal.less";
|
||||
import "./modal.scss";
|
||||
|
||||
interface ModalProps {
|
||||
id?: string;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import clsx from "clsx";
|
||||
import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
|
||||
|
||||
import "./multilineinput.less";
|
||||
import "./multilineinput.scss";
|
||||
|
||||
interface MultiLineInputProps {
|
||||
value?: string;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
min-width: 100px;
|
||||
min-height: 150px;
|
||||
position: absolute;
|
||||
z-index: 1000; // TODO: put this in theme.less
|
||||
z-index: 1000; // TODO: put this in theme.scss
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
gap: 1px;
|
||||
@ -26,7 +26,7 @@ import {
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import "./popover.less";
|
||||
import "./popover.scss";
|
||||
|
||||
interface PopoverProps {
|
||||
children: ReactNode;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import React from "react";
|
||||
import "./quickelems.less";
|
||||
import "./quickelems.scss";
|
||||
|
||||
function CenteredLoadingDiv() {
|
||||
return <CenteredDiv>loading...</CenteredDiv>;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import { MagnifyIcon } from "@/app/element/magnify";
|
||||
import { PLATFORM } from "@/app/store/global";
|
||||
import "./quicktips.less";
|
||||
import "./quicktips.scss";
|
||||
|
||||
const KeyBinding = ({ keyDecl }: { keyDecl: string }) => {
|
||||
const parts = keyDecl.split(":");
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import { useRef } from "react";
|
||||
import "./toggle.less";
|
||||
import "./toggle.scss";
|
||||
|
||||
interface ToggleProps {
|
||||
checked: boolean;
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@dot-width: 11px;
|
||||
@dot-color: var(--success-color);
|
||||
@speed: 1.5s;
|
||||
$dot-width: 11px;
|
||||
$dot-color: var(--success-color);
|
||||
$speed: 1.5s;
|
||||
|
||||
.typing {
|
||||
position: relative;
|
||||
height: @dot-width;
|
||||
height: $dot-width;
|
||||
|
||||
span {
|
||||
content: "";
|
||||
animation: blink @speed infinite;
|
||||
animation: blink $speed infinite;
|
||||
animation-fill-mode: both;
|
||||
height: @dot-width;
|
||||
width: @dot-width;
|
||||
background: @dot-color;
|
||||
height: $dot-width;
|
||||
width: $dot-width;
|
||||
background: $dot-color;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -23,12 +23,12 @@
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
margin-left: @dot-width * 1.5;
|
||||
margin-left: $dot-width * 1.5;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
margin-left: @dot-width * 3;
|
||||
margin-left: $dot-width * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import { clsx } from "clsx";
|
||||
|
||||
import "./typingindicator.less";
|
||||
import "./typingindicator.scss";
|
||||
|
||||
type TypingIndicatorProps = {
|
||||
className?: string;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import { clsx } from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
|
||||
import "./windowdrag.less";
|
||||
import "./windowdrag.scss";
|
||||
|
||||
interface WindowDragProps {
|
||||
className?: string;
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
.ellipsis() {
|
||||
@mixin ellipsis(){
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.border-radius-mixin() {
|
||||
@mixin border-radius-mixin(){
|
||||
&.border-radius-2 {
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-padding-mixin() {
|
||||
@mixin vertical-padding-mixin(){
|
||||
&.vertical-padding-0 {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
@ -85,7 +85,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-padding-mixin() {
|
||||
@mixin horizontal-padding-mixin(){
|
||||
&.horizontal-padding-0 {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
@ -132,7 +132,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.font-size-mixin() {
|
||||
@mixin font-size-mixin(){
|
||||
&.font-size-10 {
|
||||
font-size: 10px;
|
||||
}
|
||||
@ -186,7 +186,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.font-weight-mixin() {
|
||||
@mixin font-weight-mixin(){
|
||||
&.font-weight-100 {
|
||||
font-weight: 100;
|
||||
}
|
||||
@ -210,7 +210,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-dims-mixin() {
|
||||
@mixin avatar-dims-mixin(){
|
||||
&.size-xs {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@ -9,7 +9,7 @@ import { Modal } from "./modal";
|
||||
import { isDev } from "@/util/isdev";
|
||||
import { useState } from "react";
|
||||
import { getApi } from "../store/global";
|
||||
import "./about.less";
|
||||
import "./about.scss";
|
||||
|
||||
interface AboutModalProps {}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import { Modal } from "@/app/modals/modal";
|
||||
import { modalsModel } from "@/app/store/modalmodel";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
import "./messagemodal.less";
|
||||
import "./messagemodal.scss";
|
||||
|
||||
const MessageModal = ({ children }: { children: ReactNode }) => {
|
||||
function closeModal() {
|
||||
|
||||
@ -6,7 +6,7 @@ import clsx from "clsx";
|
||||
import { forwardRef } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import "./modal.less";
|
||||
import "./modal.scss";
|
||||
|
||||
interface ModalProps {
|
||||
children?: React.ReactNode;
|
||||
|
||||
@ -13,7 +13,7 @@ import { QuickTips } from "@/app/element/quicktips";
|
||||
import { atoms, getApi } from "@/app/store/global";
|
||||
import { modalsModel } from "@/app/store/modalmodel";
|
||||
import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import "./tos.less";
|
||||
import "./tos.scss";
|
||||
|
||||
const pageNumAtom: PrimitiveAtom<number> = atom<number>(1);
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../mixins.less";
|
||||
@use "../mixins.scss";
|
||||
|
||||
.type-ahead-modal-backdrop {
|
||||
position: absolute;
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
.typeahead-item-name {
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
@ -8,7 +8,7 @@ import clsx from "clsx";
|
||||
import React, { forwardRef, useLayoutEffect, useRef } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import "./typeaheadmodal.less";
|
||||
import "./typeaheadmodal.scss";
|
||||
|
||||
interface SuggestionsProps {
|
||||
suggestions?: SuggestionsType[];
|
||||
|
||||
@ -8,7 +8,7 @@ import * as keyutil from "@/util/keyutil";
|
||||
import { UserInputService } from "../store/services";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import "./userinputmodal.less";
|
||||
import "./userinputmodal.scss";
|
||||
|
||||
const UserInputModal = (userInputRequest: UserInputRequest) => {
|
||||
const [responseText, setResponseText] = useState("");
|
||||
|
||||
@ -6,7 +6,7 @@ import { FloatingPortal, useFloating, useInteractions } from "@floating-ui/react
|
||||
import clsx from "clsx";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useEffect, useState } from "react";
|
||||
import "./notificationbubbles.less";
|
||||
import "./notificationbubbles.scss";
|
||||
import { NotificationItem } from "./notificationitem";
|
||||
import { useNotification } from "./usenotification";
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
.notification-title {
|
||||
.notification {
|
||||
.notification-title {
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
@ -9,63 +10,63 @@
|
||||
margin-bottom: 3px;
|
||||
|
||||
&.green {
|
||||
color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: var(--error-color);
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
color: var(--warning-color);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
.notification-message {
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
.notification-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
|
||||
i {
|
||||
margin-left: 3px;
|
||||
font-size: 11px;
|
||||
margin-left: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-btn {
|
||||
.lock-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 10px 8px;
|
||||
font-size: 11px;
|
||||
color: rgb(from var(--main-text-color) r g b / 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
.notification {
|
||||
width: 100%;
|
||||
color: var(--main-text-color);
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-bubble {
|
||||
.notification-bubble {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 380px;
|
||||
@ -76,43 +77,43 @@
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.12);
|
||||
background: #232323;
|
||||
box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-inner {
|
||||
.notification-inner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
column-gap: 6px;
|
||||
|
||||
.notification-icon {
|
||||
margin-right: 5px;
|
||||
margin-top: 1px;
|
||||
margin-right: 5px;
|
||||
margin-top: 1px;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
i.green {
|
||||
color: var(--success-color);
|
||||
}
|
||||
i.green {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
i.red {
|
||||
color: var(--error-color);
|
||||
}
|
||||
i.red {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
i.yellow {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
i.yellow {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-timestamp {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hovered {
|
||||
}
|
||||
&.hovered {
|
||||
background: #292929;
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,7 @@ import { Button } from "@/element/button";
|
||||
import { makeIconClass } from "@/util/util";
|
||||
import clsx from "clsx";
|
||||
|
||||
import "./notificationitem.less";
|
||||
import "./notificationitem.scss";
|
||||
interface NotificationItemProps {
|
||||
notification: NotificationType;
|
||||
onRemove: (id: string) => void;
|
||||
|
||||
@ -13,7 +13,7 @@ import { NotificationItem } from "./notificationitem";
|
||||
import { useUpdateNotifier } from "./updatenotifier";
|
||||
import { useNotification } from "./usenotification";
|
||||
|
||||
import "./notificationpopover.less";
|
||||
import "./notificationpopover.scss";
|
||||
|
||||
const NotificationPopover = () => {
|
||||
useUpdateNotifier();
|
||||
|
||||
@ -12,7 +12,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "re
|
||||
import { atoms, globalStore, refocusNode } from "@/app/store/global";
|
||||
import { RpcApi } from "@/app/store/wshclientapi";
|
||||
import { TabRpcClient } from "@/app/store/wshrpcutil";
|
||||
import "./tab.less";
|
||||
import "./tab.scss";
|
||||
|
||||
interface TabProps {
|
||||
id: string;
|
||||
|
||||
@ -12,7 +12,7 @@ import { OverlayScrollbars } from "overlayscrollbars";
|
||||
import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { debounce } from "throttle-debounce";
|
||||
import { Tab } from "./tab";
|
||||
import "./tabbar.less";
|
||||
import "./tabbar.scss";
|
||||
import { UpdateStatusBanner } from "./updatebanner";
|
||||
import { WorkspaceSwitcher } from "./workspaceswitcher";
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ import * as WOS from "@/store/wos";
|
||||
import { atom, useAtomValue } from "jotai";
|
||||
import * as React from "react";
|
||||
import { useMemo } from "react";
|
||||
import "./tabcontent.less";
|
||||
import "./tabcontent.scss";
|
||||
|
||||
const tileGapSizeAtom = atom((get) => {
|
||||
const settings = get(atoms.settingsAtom);
|
||||
|
||||
@ -2,7 +2,7 @@ import { Button } from "@/element/button";
|
||||
import { atoms, getApi } from "@/store/global";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { memo, useEffect, useState } from "react";
|
||||
import "./updatebanner.less";
|
||||
import "./updatebanner.scss";
|
||||
|
||||
const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
|
||||
const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
|
||||
|
||||
@ -22,7 +22,7 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
||||
import { memo, useEffect, useRef } from "react";
|
||||
import WorkspaceSVG from "../asset/workspace.svg";
|
||||
|
||||
import "./workspaceswitcher.less";
|
||||
import "./workspaceswitcher.scss";
|
||||
|
||||
interface ColorSelectorProps {
|
||||
colors: string[];
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import { CollapsibleMenu } from "@/app/element/collapsiblemenu";
|
||||
import { memo } from "react";
|
||||
|
||||
import "./channels.less";
|
||||
import "./channels.scss";
|
||||
|
||||
const Channels = memo(({ channels }: { channels: MenuItem[] }) => {
|
||||
return <CollapsibleMenu className="channel-list" items={channels}></CollapsibleMenu>;
|
||||
|
||||
@ -10,7 +10,7 @@ import { ChatBox } from "./chatbox";
|
||||
import { channels, messages, users } from "./data";
|
||||
import { UserList } from "./userlist";
|
||||
|
||||
import "./chat.less";
|
||||
import "./chat.scss";
|
||||
|
||||
class ChatModel {
|
||||
viewType: string;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { ChatMessages } from "./chatmessages";
|
||||
import "./chatmessages.less";
|
||||
import "./chatmessages.scss";
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
|
||||
@ -6,7 +6,7 @@ import clsx from "clsx";
|
||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
||||
import { memo, useEffect, useRef } from "react";
|
||||
|
||||
import "./chatmessages.less";
|
||||
import "./chatmessages.scss";
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { UserList } from "./userlist";
|
||||
|
||||
import "./userlist.less";
|
||||
import "./userlist.scss";
|
||||
|
||||
export interface UserStatus {
|
||||
text: string;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import clsx from "clsx";
|
||||
import { memo } from "react";
|
||||
import { Avatar } from "../../element/avatar";
|
||||
import "./userlist.less";
|
||||
import "./userlist.scss";
|
||||
|
||||
export interface UserStatus {
|
||||
label: string;
|
||||
|
||||
@ -16,7 +16,7 @@ import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
|
||||
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
|
||||
import ymlWorker from "./yamlworker?worker";
|
||||
|
||||
import "./codeeditor.less";
|
||||
import "./codeeditor.scss";
|
||||
|
||||
// there is a global monaco variable (TODO get the correct TS type)
|
||||
declare var monaco: Monaco;
|
||||
|
||||
@ -7,7 +7,7 @@ import { WebView, WebViewModel } from "@/app/view/webview/webview";
|
||||
import { fireAndForget } from "@/util/util";
|
||||
import { atom, useAtomValue } from "jotai";
|
||||
import { useCallback } from "react";
|
||||
import "./helpview.less";
|
||||
import "./helpview.scss";
|
||||
|
||||
const docsiteWebUrl = "https://docs.waveterm.dev/";
|
||||
const baseUrlRegex = /http[s]?:\/\/([^:\/])+(:\d+)?/;
|
||||
|
||||
@ -7,7 +7,7 @@ import * as Plot from "@observablehq/plot";
|
||||
import * as d3 from "d3";
|
||||
import * as React from "react";
|
||||
|
||||
import "./plotview.less";
|
||||
import "./plotview.scss";
|
||||
|
||||
function PlotWindow() {
|
||||
return <div className="plot-window"></div>;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../../mixins.less";
|
||||
@use "../../mixins.scss";
|
||||
|
||||
.csv-view {
|
||||
opacity: 0; /* Start with an opacity of 0, meaning it's invisible */
|
||||
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
@ -53,7 +53,7 @@
|
||||
text-align: left;
|
||||
padding-right: 15px;
|
||||
position: relative;
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
|
||||
.sort-icon {
|
||||
position: absolute;
|
||||
@ -85,7 +85,7 @@
|
||||
flex-grow: 2;
|
||||
display: block;
|
||||
text-align: left;
|
||||
.ellipsis();
|
||||
@include mixins.ellipsis();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,7 +14,7 @@ import Papa from "papaparse";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { useDimensionsWithExistingRef } from "@/app/hook/useDimensions";
|
||||
import "./csvview.less";
|
||||
import "./csvview.scss";
|
||||
|
||||
const MAX_DATA_SIZE = 10 * 1024 * 1024; // 10MB in bytes
|
||||
|
||||
|
||||
@ -1,234 +0,0 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "../../mixins.less";
|
||||
|
||||
.dir-table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
--min-row-width: 35rem;
|
||||
.dir-table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
--col-size-size: 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:not([data-scroll-height="0"]) .dir-table-head::after {
|
||||
background: rgb(from var(--block-bg-color) r g b / 0.2);
|
||||
}
|
||||
|
||||
.dir-table-head::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.dir-table-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
.dir-table-head-row {
|
||||
display: flex;
|
||||
min-width: var(--min-row-width);
|
||||
padding: 4px 6px;
|
||||
font-size: 0.75rem;
|
||||
|
||||
.dir-table-head-cell {
|
||||
flex: 0 0 auto;
|
||||
user-select: none;
|
||||
}
|
||||
.dir-table-head-cell:not(:first-child) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.dir-table-head-cell-content {
|
||||
padding: 2px 4px;
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
flex: 1 1 auto;
|
||||
overflow-x: hidden;
|
||||
letter-spacing: -0.12px;
|
||||
|
||||
.dir-table-head-direction {
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.dir-table-head-size {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.dir-table-head-resize-box {
|
||||
width: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
.dir-table-head-resize {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: none;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dir-table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.dir-table-body-search-display {
|
||||
display: flex;
|
||||
border-radius: 3px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--warning-color);
|
||||
|
||||
.search-display-close-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dir-table-body-scroll-box {
|
||||
position: relative;
|
||||
.dummy {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
.dir-table-body-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
padding: 0 6px;
|
||||
min-width: var(--min-row-width);
|
||||
|
||||
&.focused {
|
||||
background-color: rgb(from var(--accent-color) r g b / 0.5);
|
||||
color: var(--main-text-color);
|
||||
|
||||
.dir-table-body-cell {
|
||||
.dir-table-lastmod,
|
||||
.dir-table-modestr,
|
||||
.dir-table-size,
|
||||
.dir-table-type {
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgb(from var(--accent-color) r g b / 0.5);
|
||||
color: var(--main-text-color);
|
||||
|
||||
.dir-table-body-cell {
|
||||
.dir-table-lastmod,
|
||||
.dir-table-modestr,
|
||||
.dir-table-size,
|
||||
.dir-table-type {
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:focus):not(.focused) {
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
.dir-table-body-cell {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0.25rem;
|
||||
cursor: default;
|
||||
font-size: 0.8125rem;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.col-size {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dir-table-lastmod,
|
||||
.dir-table-modestr,
|
||||
.dir-table-size,
|
||||
.dir-table-type {
|
||||
color: var(--secondary-text-color);
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.dir-table-type {
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
.dir-table-modestr {
|
||||
font-family: Hack;
|
||||
}
|
||||
|
||||
&:has(.dir-table-name) {
|
||||
.ellipsis();
|
||||
}
|
||||
.dir-table-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dir-table-search-line {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.7rem;
|
||||
|
||||
.dir-table-search-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dir-table-button {
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0.2rem;
|
||||
border-radius: 6px;
|
||||
|
||||
input {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user