Compare commits

..

2 Commits

Author SHA1 Message Date
Sylvia Crowe c19ef48aa8 fix: match link formatting to other links 2024-03-14 20:41:13 -07:00
Sylvia Crowe f31666f037 add link to telemetry page in the welcome screen 2024-03-14 16:49:05 -07:00
185 changed files with 6349 additions and 15631 deletions
+24 -77
View File
@@ -1,8 +1,7 @@
[
{
"command": "system:toggleDeveloperTools",
"keys": ["Cmd:Option:i"],
"info": "Opens the chrome developer tool menu"
"keys": ["Cmd:Option:i"]
},
{
"command": "system:hideWindow",
@@ -16,62 +15,10 @@
"command": "generic:confirm",
"keys": ["Enter"]
},
{
"command": "generic:expandTextInput",
"keys": ["Shift:Enter", "Ctrl:Enter"]
},
{
"command": "generic:deleteItem",
"keys": ["Backspace", "Delete"]
},
{
"command": "generic:space",
"keys": ["Space"]
},
{
"command": "generic:tab",
"keys": ["Tab"]
},
{
"command": "generic:numpad-0",
"keys": ["0"]
},
{
"command": "generic:numpad-1",
"keys": ["1"]
},
{
"command": "generic:numpad-2",
"keys": ["2"]
},
{
"command": "generic:numpad-3",
"keys": ["3"]
},
{
"command": "generic:numpad-4",
"keys": ["4"]
},
{
"command": "generic:numpad-5",
"keys": ["5"]
},
{
"command": "generic:numpad-6",
"keys": ["6"]
},
{
"command": "generic:numpad-7",
"keys": ["7"]
},
{
"command": "generic:numpad-8",
"keys": ["8"]
},
{
"command": "generic:numpad-9",
"keys": ["9"]
},
{
"command": "generic:selectAbove",
"keys": ["ArrowUp"]
@@ -80,14 +27,6 @@
"command": "generic:selectBelow",
"keys": ["ArrowDown"]
},
{
"command": "generic:selectLeft",
"keys": ["ArrowLeft"]
},
{
"command": "generic:selectRight",
"keys": ["ArrowRight"]
},
{
"command": "generic:selectPageAbove",
"keys": ["PageUp"]
@@ -107,12 +46,12 @@
{
"command": "app:openConnectionsView",
"keys": [],
"commandStr": ["/mainview connections"]
"commandStr": "/mainview connections"
},
{
"command": "app:openSettingsView",
"keys": [],
"commandStr": ["/mainview clientsettings"]
"commandStr": "/mainview clientsettings"
},
{
"command": "app:newTab",
@@ -128,8 +67,7 @@
},
{
"command": "app:restartCommand",
"keys": ["Cmd:r"],
"info": "Restarts the command running in the current selected line"
"keys": ["Cmd:r"]
},
{
"command": "app:restartLastCommand",
@@ -193,39 +131,48 @@
},
{
"command": "app:selectWorkspace-1",
"keys": ["Cmd:Ctrl:1"]
"keys": ["Cmd:Ctrl:1"],
"commandStr": "/session 1"
},
{
"command": "app:selectWorkspace-2",
"keys": ["Cmd:Ctrl:2"]
"keys": ["Cmd:Ctrl:2"],
"commandStr": "/session 2"
},
{
"command": "app:selectWorkspace-3",
"keys": ["Cmd:Ctrl:3"]
"keys": ["Cmd:Ctrl:3"],
"commandStr": "/session 3"
},
{
"command": "app:selectWorkspace-4",
"keys": ["Cmd:Ctrl:4"]
"keys": ["Cmd:Ctrl:4"],
"commandStr": "/session 4"
},
{
"command": "app:selectWorkspace-5",
"keys": ["Cmd:Ctrl:5"]
"keys": ["Cmd:Ctrl:5"],
"commandStr": "/session 5"
},
{
"command": "app:selectWorkspace-6",
"keys": ["Cmd:Ctrl:6"]
"keys": ["Cmd:Ctrl:6"],
"commandStr": "/session 6"
},
{
"command": "app:selectWorkspace-7",
"keys": ["Cmd:Ctrl:7"]
"keys": ["Cmd:Ctrl:7"],
"commandStr": "/session 7"
},
{
"command": "app:selectWorkspace-8",
"keys": ["Cmd:Ctrl:8"]
"keys": ["Cmd:Ctrl:8"],
"commandStr": "/session 8"
},
{
"command": "app:selectWorkspace-9",
"keys": ["Cmd:Ctrl:9"]
"keys": ["Cmd:Ctrl:9"],
"commandStr": "/session 9"
},
{
"command": "app:toggleSidebar",
@@ -238,7 +185,7 @@
{
"command": "app:openBookmarksView",
"keys": ["Cmd:b"],
"commandStr": ["/bookmarks:show"]
"commandStr": "/bookmarks:show"
},
{
"command": "bookmarks:edit",
@@ -283,7 +230,7 @@
{
"command": "cmdinput:openHistory",
"keys": ["Ctrl:r"],
"commandStr": ["/history"]
"commandStr": "/history"
},
{
"command": "cmdinput:openAIChat",
+11 -22
View File
@@ -6,7 +6,7 @@
},
"productName": "Wave",
"description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
"version": "0.7.2",
"version": "0.7.0",
"main": "dist/emain.js",
"license": "Apache-2.0",
"repository": {
@@ -18,13 +18,12 @@
"appId": "dev.commandline.waveterm"
},
"dependencies": {
"@lexical/react": "^0.14.3",
"@monaco-editor/react": "^4.5.1",
"@table-nav/core": "^0.0.7",
"@table-nav/react": "^0.0.7",
"@tanstack/match-sorter-utils": "^8.8.4",
"@tanstack/react-table": "^8.10.3",
"@withfig/autocomplete": "^2.652.3",
"@types/semver": "^7.5.6",
"autobind-decorator": "^2.4.0",
"base64-js": "^1.5.1",
"classnames": "^2.3.1",
@@ -33,30 +32,24 @@
"electron-squirrel-startup": "^1.0.0",
"electron-updater": "^6.1.8",
"framer-motion": "^10.16.16",
"lexical": "^0.14.3",
"mobx": "6.12",
"mobx-react": "^7.5.0",
"monaco-editor": "^0.44.0",
"mustache": "^4.2.0",
"node-fetch": "^3.2.10",
"overlayscrollbars": "^2.6.1",
"overlayscrollbars-react": "^0.5.5",
"papaparse": "^5.4.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-markdown": "^9.0.0",
"remark": "^15.0.1",
"remark-gfm": "^4.0.0",
"shell-quote": "^1.8.1",
"sprintf-js": "^1.1.2",
"throttle-debounce": "^5.0.0",
"tsx-control-statements": "^5.1.1",
"tsx-control-statements": "^4.1.1",
"uuid": "^9.0.0",
"winston": "^3.8.2",
"xterm": "^5.3.0",
"xterm-addon-serialize": "^0.11.0",
"xterm-addon-web-links": "^0.9.0",
"xterm-addon-webgl": "^0.16.0"
"xterm": "^5.0.0",
"xterm-addon-web-links": "^0.9.0"
},
"devDependencies": {
"@babel/cli": "^7.17.10",
@@ -70,31 +63,27 @@
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.17.12",
"@electron/rebuild": "^3.6.0",
"@svgr/webpack": "^8.1.0",
"@types/classnames": "^2.3.1",
"@types/electron": "^1.6.10",
"@types/node": "^20.11.0",
"@types/node": "20.11.0",
"@types/papaparse": "^5.3.10",
"@types/react": "^18.0.12",
"@types/semver": "^7.5.6",
"@types/shell-quote": "^1.7.5",
"@types/sprintf-js": "^1.1.3",
"@types/throttle-debounce": "^5.0.1",
"@types/uuid": "^9.0.7",
"@types/uuid": "9.0.7",
"@types/webpack-env": "^1.18.3",
"@withfig/autocomplete-types": "^1.30.0",
"babel-loader": "^9.1.3",
"babel-plugin-jsx-control-statements": "^4.1.2",
"copy-webpack-plugin": "^12.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"electron": "^29.0.1",
"electron": "29.0.1",
"electron-builder": "^24.13.3",
"electron-builder-squirrel-windows": "^24.13.3",
"file-loader": "^6.2.0",
"http-server": "^14.1.1",
"less": "^4.1.2",
"less-loader": "^12.0.0",
"less-loader": "^11.0.0",
"lodash-webpack-plugin": "^0.11.6",
"mini-css-extract-plugin": "^2.6.0",
"prettier": "^2.8.8",
@@ -105,7 +94,7 @@
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4",
"webpack-dev-server": "^4.9.1",
"webpack-merge": "^5.8.0",
"yaml": "^2.4.0"
},
+6 -6
View File
@@ -5,14 +5,14 @@
<base href="../" />
<script charset="UTF-8" src="dist-dev/waveterm.js"></script>
<link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/brands.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/solid.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
<link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
<link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
<link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
<link rel="stylesheet" href="dist-dev/waveterm.css" />
<link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
<link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css">
</head>
<body>
<div id="measure"></div>
+6 -6
View File
@@ -5,14 +5,14 @@
<base href="../" />
<script charset="UTF-8" src="dist/waveterm.js"></script>
<link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/brands.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/solid.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css" />
<link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
<link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
<link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
<link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
<link rel="stylesheet" href="dist/waveterm.css" />
<link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
<link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css" />
</head>
<body>
<div id="measure"></div>
+78 -55
View File
@@ -7,6 +7,16 @@
:root {
--fa-style-family: "Font Awesome 6 Sharp";
/* these variables are overridden by user settings */
/*
--termfontfamily: "Hack";
--termfontsize: 13px;
--termlineheight: 15px;
--termpad: 7px;
--termfontsize-sm: 11px;
--termlineheight-sm: 13px;
*/
/* base fonts */
--base-font: normal 15px / normal "Lato", sans-serif;
@@ -34,43 +44,37 @@
--floating-logo-width: 40px;
--floating-logo-height: var(--screentabs-height);
/* right sidebar triggers */
--floating-right-sidebar-triggers-width-darwin: 50px;
--floating-right-sidebar-triggers-width: 40px;
/* global colors */
--app-bg-color: black;
--app-accent-color: rgb(88, 193, 66);
--app-accent-bg-color: rgba(88, 193, 66, 0.25);
--app-accent-bg-darker-color: rgba(88, 193, 66, 0.5);
--app-text-color: rgb(211, 215, 207);
--app-text-primary-color: rgb(255, 255, 255);
--app-text-secondary-color: rgb(195, 200, 194);
--app-text-disabled-color: rgb(173, 173, 173);
--app-text-bg-color: rgb(23, 23, 23);
--app-text-bg-disabled-color: rgb(51, 51, 51);
--app-border-color: rgb(51, 51, 51);
--app-maincontent-bg-color: rgb(51, 51, 51);
--app-panel-bg-color: rgba(21, 23, 21, 1);
--app-panel-bg-color-dev: rgb(21, 23, 48);
--app-icon-color: rgb(139, 145, 138);
--app-icon-hover-color: rgb(255, 255, 255);
--app-selected-mask-color: rgba(255, 255, 255, 0.06);
/* global status colors */
--app-accent-bg-color: rgba(88, 193, 66, 0.2);
--app-error-color: rgb(229, 77, 46);
--app-warning-color: rgb(224, 185, 86);
--app-success-color: rgb(78, 154, 6);
--app-idle-color: var(--app-text-secondary-color);
--app-text-color: rgb(211, 215, 207);
--app-text-primary-color: rgb(255, 255, 255);
--app-text-secondary-color: rgb(195, 200, 194);
--app-border-color: rgb(51, 51, 51);
--app-maincontent-bg-color: #333;
--app-panel-bg-color: rgba(21, 23, 21, 1);
--app-panel-bg-color-dev: rgb(21, 23, 48);
--app-icon-color: rgb(139, 145, 138);
--app-icon-hover-color: #fff;
--app-selected-mask-color: rgba(255, 255, 255, 0.06);
/* icon colors */
/* just for macos */
--app-border-radius-darwin: 10px;
/* global generic colors */
--app-black: rgb(0, 0, 0);
/* scrollbar colors */
/* --scrollbar-background-color: rgba(21, 23, 21, 1); */
--scrollbar-background-color: var(--app-bg-color);
--scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
--scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
--scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
/* code color */
--pre-bg-color: rgb(0, 0, 0);
@@ -90,7 +94,6 @@
--form-element-border-color: rgba(241, 246, 243, 0.15);
--form-element-bg-color: var(--app-bg-color);
--form-element-text-color: var(--app-text-primary-color);
--form-element-primary-text-color: var(--app-text-primary-color);
--form-element-label-color: var(--app-text-secondary-color);
--form-element-primary-color: var(--app-accent-color);
--form-element-secondary-color: rgba(255, 255, 255, 0.2);
@@ -109,15 +112,34 @@
--markdown-bg-color: rgb(35, 35, 35);
--markdown-outline-color: var(--form-element-primary-color);
/* status(remote) colors */
/* todo: all status colors must be unified */
--status-connected-color: var(--app-success-color);
--status-connecting-color: var(--app-warning-color);
--status-error-color: var(--app-error-color);
--status-disconnected-color: var(--app-text-secondary-color);
/* status indicator colors */
/* todo: all status colors must be unified */
--status-indicator-color: var(--app-text-color);
--status-indicator-error: var(--status-error-color);
--status-indicator-success: var(--status-connected-color);
/* status(version) colors */
/* todo: all status colors must be unified */
--status-outdated-color: var(--status-connecting-color);
--status-updated-color: var(--status-connected-color);
/* term status colors */
--term-error-color: var(--app-error-color);
--term-warning-color: var(--app-warning-color);
/* todo: all status colors must be unified */
--term-error-color: var(--status-error-color);
--term-warning-color: var(--status-connecting-color);
/* hotkey colors */
--hotkey-text-color: var(--app-text-secondary-color);
/* sidebar colors */
--sidebar-highlight-color: var(--app-accent-bg-color);
--sidebar-highlight-color: rgba(241, 246, 243, 0.08);
--sidebar-font-size: 15px;
--sidebar-line-height: 1.5;
--sidebar-font-weight: normal;
@@ -125,18 +147,19 @@
/* line colors */
--line-sidebar-message-color: rgb(196, 160, 0);
--line-background: var(--app-panel-bg-color);
--line-avatar-color: rgb(236, 238, 236);
--line-background: rgba(21, 23, 21, 1);
--line-avatar-color: #eceeec;
--line-text-color: rgb(211, 215, 207);
--line-svg-fill-color: rgb(150, 152, 150);
--line-svg-hover-fill-color: rgb(236, 238, 236);
--line-svg-hover-fill-color: #eceeec;
--line-selected-border-color: rgb(193, 195, 193);
--line-separator-color: rgb(126, 126, 126);
--line-error-color: var(--app-error-color);
--line-warning-color: var(--app-warning-color);
--line-base-soft-blue-color: rgb(114, 159, 207);
--line-base-soft-blue-color: #729fcf;
--line-active-border-color: var(--app-accent-color);
--line-selected-bg-color: rgba(255, 255, 255, 0.05);
--line-selected-border-left-color: rgb(119, 119, 119);
--line-selected-border-left-color: #777777;
--line-selected-error-border-color: rgba(204, 0, 0, 0.8);
--line-selected-error-bg-color: rgb(19, 4, 3);
--line-error-bg-color: rgba(200, 0, 0, 0.1);
@@ -152,24 +175,39 @@
--line-actions-active-color: rgba(255, 255, 255, 1);
--line-actions-bg-color: rgba(255, 255, 255, 0.15);
/* view colors */
/* todo: bookmarks is a view, colors must be unified with --view* colors */
--bookmarks-text-color: rgb(211, 215, 207);
--bookmarks-textarea-bg-color: rgb(0, 0, 0);
--bookmarks-disabled-text-color: rgb(173, 173, 173);
--bookmarks-control-hover-color: rgb(255, 255, 255);
/* view colors */
--view-error-color: var(--app-error-color);
--view-text-color: var(--app-text-color);
/* table colors */
--table-border-color: rgba(241, 246, 243, 0.15);
--table-thead-border-top-color: rgba(250, 250, 250, 0.1);
--table-thead-bright-border-color: rgb(204, 204, 204);
--table-thead-bright-border-color: #ccc;
--table-thead-bg-color: rgba(250, 250, 250, 0.02);
--table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
--table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
--table-tr-selected-bg-color: rgb(34, 34, 34);
--table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);
--table-tr-selected-bg-color: #222;
--table-tr-selected-hover-bg-color: #333;
/* session colors */
--session-bg-color: rgba(13, 13, 13, 0.85);
/* cmdinput colors */
--cmdinput-bg-color: var(--app-text-bg-color);
--cmdinput-textarea-bg-color: #171717;
--cmdinput-text-error-color: var(--term-red);
--cmdinput-history-item-error-color: var(--term-bright-red);
--cmdinput-history-item-selected-error-color: var(--term-bright-red);
--cmdinput-button-bg-color: var(--tab-green);
--cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
--cmdinput-history-bg-color: var(--app-bg-color);
--cmdinput-button-bg-color: rgb(88, 193, 66);
--cmdinput-comment-button-bg-color: rgb(57, 113, 255);
--cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
--cmdinput-history-bg-color: rgb(21, 23, 21, 1);
/* screen view color */
--screen-view-text-caption-color: rgb(139, 145, 138);
@@ -181,20 +219,5 @@
--modal-bg-color: var(--app-bg-color);
--modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
--logo-button-hover-bg-color: var(--app-accent-bg-color);
--xterm-viewport-border-color: rgba(241, 246, 243, 0.15);
--datepicker-cell-hover-bg-color: rgba(255, 255, 255, 0.06);
--datepicker-cell-other-text-color: rgba(255, 255, 255, 0.3);
--datepicker-header-fade-color: rgba(255, 255, 255, 0.4);
--datepicker-year-header-bg-color: rgba(255, 255, 255, 0.2); /* Light grey background */
--datepicker-year-header-border-color: rgba(241, 246, 243, 0.15); /* Light grey border */
/* OverlayScrollbars styling */
.os-scrollbar {
--os-handle-bg: var(--scrollbar-thumb-color);
--os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
--os-handle-bg-active: var(--scrollbar-thumb-active-color);
}
--logo-button-hover-bg-color: #1e1e1e;
}
+29 -29
View File
@@ -1,28 +1,36 @@
/* Copyright 2024, Command Line Inc.
SPDX-License-Identifier: Apache-2.0 */
@import url("./term-default.css");
@import url("./term-light.css");
@import "./default.css";
@import "./term-default.css";
@import "./term-light.css";
:root {
--app-bg-color: rgb(254, 254, 254);
--app-bg-color: #fefefe;
--app-accent-color: rgb(75, 166, 57);
--app-accent-bg-color: rgba(75, 166, 57, 0.2);
--app-text-color: rgb(0, 0, 0);
--app-text-primary-color: rgb(23, 23, 23);
--app-text-secondary-color: rgb(76, 76, 76);
--app-text-color: #000;
--app-text-primary-color: rgb(0, 0, 0, 0.9);
--app-text-secondary-color: rgb(0, 0, 0, 0.7);
--app-border-color: rgb(139 145 138);
--app-panel-bg-color: rgb(224, 224, 224);
--app-panel-bg-color-dev: rgb(224, 224, 224);
--app-icon-color: rgb(110, 110, 110);
--app-icon-hover-color: rgb(80, 80, 80);
--app-panel-bg-color: #e0e0e0;
--app-panel-bg-color-dev: #e0e0e0;
--app-icon-color: rgb(80, 80, 80);
--app-icon-hover-color: rgb(100, 100, 100);
--app-selected-mask-color: rgba(0, 0, 0, 0.06);
--input-bg-color: rgb(238, 238, 238);
--input-bg-color: #eeeeee;
/* tab color */
--tab-white: rgb(0, 0, 0, 0.6);
--tab-mint: rgb(70, 235, 156);
/* button colors */
--button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */
--button-primary-color: #fefefe;
--button-secondary-bg-color: rgba(200, 200, 200, 0.3); /* Semi-transparent light gray */
/* view colors */
--view-text-color: var(--app-text-color);
/* table colors */
--table-thead-border-top-color: rgba(0, 0, 0, 0.2);
@@ -30,19 +38,18 @@
--table-thead-bg-color: rgba(250, 250, 250, 0.15);
--table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
--table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
--table-tr-selected-bg-color: rgb(221, 221, 221);
--table-tr-selected-hover-bg-color: rgb(204, 204, 204);
--table-tr-selected-bg-color: #dddddd;
--table-tr-selected-hover-bg-color: #cccccc;
/* form colors */
--form-element-border-color: rgba(0, 0, 0, 0.3);
--form-element-bg-color: var(--app-bg-color);
--form-element-text-color: var(--app-text-primary-color);
--form-element-primary-text-color: var(--app-text-primary-color);
--form-element-text-color: var(--app-text-color);
--form-element-label-color: rgba(0, 0, 0, 0.6);
--form-element-secondary-color: rgba(0, 0, 0, 0.09);
--form-element-icon-color: rgb(0, 0, 0, 0.6);
--form-element-disabled-text-color: rgb(183, 183, 183);
--form-element-placeholder-color: rgb(183, 183, 183);
--form-element-disabled-text-color: #b7b7b7;
--form-element-placeholder-color: #b7b7b7;
--markdown-bg-color: rgb(0, 0, 0, 0.1);
@@ -50,28 +57,21 @@
--modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
/* cmd input */
--cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1);
--cmdinput-textarea-border-color: var(--form-element-border-color);
/* scroll colors */
--scrollbar-background-color: var(--app-bg-color);
--scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
--scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);
--scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5);
/* line color */
--line-actions-bg-color: rgba(0, 0, 0, 0.1);
--line-actions-inactive-color: rgba(0, 0, 0, 0.3);
--line-actions-active-color: rgba(0, 0, 0, 1);
--logo-button-hover-bg-color: rgb(240, 240, 240);
--xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
--datepicker-cell-hover-bg-color: rgb(240, 240, 240);
--datepicker-cell-other-text-color: rgba(0, 0, 0, 0.3);
--datepicker-header-fade-color: rgba(0, 0, 0, 0.4);
--datepicker-year-header-bg-color: rgb(245, 245, 245);
--datepicker-year-header-border-color: rgb(220, 220, 220);
/* toggle colors */
--toggle-thumb-color: var(--app-bg-color);
--logo-button-hover-bg-color: #f0f0f0;
}
+1 -1
View File
@@ -27,6 +27,6 @@
--term-cmdtext: #ffffff;
--term-foreground: #d3d7cf;
--term-background: #000000;
--term-selection-background: #ffffff60;
--term-selection-background: #ffffff90;
--term-cursor-accent: #000000;
}
-3
View File
@@ -1,3 +0,0 @@
@import url("./default.css") screen;
@import url("./light.css") screen and (prefers-color-scheme: light);
+3 -3
View File
@@ -44,7 +44,7 @@ rm -rf bin/
rm -rf build/
node_modules/.bin/webpack --env prod
WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
WAVESHELL_VERSION=v0.6
WAVESHELL_VERSION=v0.5
GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
function buildWaveShell {
(cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -69,7 +69,7 @@ rm -rf bin/
rm -rf build/
node_modules/.bin/webpack --env prod
WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
WAVESHELL_VERSION=v0.6
WAVESHELL_VERSION=v0.5
GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
function buildWaveShell {
(cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
@@ -96,7 +96,7 @@ CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflag
```bash
# @scripthaus command fullbuild-waveshell
set -e
WAVESHELL_VERSION=v0.6
WAVESHELL_VERSION=v0.5
GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
function buildWaveShell {
(cd waveshell; CGO_ENABLED=0 GOOS=$1 GOARCH=$2 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-$WAVESHELL_VERSION-$1.$2 main-waveshell.go)
+41 -102
View File
@@ -101,7 +101,6 @@ body input.input {
font-size: 10px;
font-weight: 300;
line-height: 14px;
user-select: none;
}
.text-s1.icon {
@@ -251,13 +250,6 @@ input[type="checkbox"] {
justify-content: center;
}
.flex-centered-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.a-block {
display: block;
}
@@ -310,25 +302,6 @@ a.a-block {
}
}
.right-sidebar-triggers {
position: absolute;
z-index: 25;
right: 0px;
display: flex;
flex-direction: row;
align-items: center;
pointer-events: none;
height: 38px;
padding: 0 5px;
.right-sidebar-trigger {
cursor: pointer;
user-select: none;
-webkit-app-region: no-drag;
pointer-events: all;
}
}
.copied-indicator {
position: absolute;
top: 0;
@@ -743,28 +716,28 @@ a.a-block {
.status-icon.status-connected {
path,
circle {
fill: var(--app-success-color);
fill: var(--status-connected-color);
}
}
.status-icon.status-connecting {
path,
circle {
fill: var(--app-warning-color);
fill: var(--status-connecting-color);
}
}
.status-icon.status-disconnected {
path,
circle {
fill: var(--app-idle-color);
fill: var(--status-disconnected-color);
}
}
.status-icon.status-error {
path,
circle {
fill: var(--app-error-color);
fill: var(--status-error-color);
}
}
@@ -793,75 +766,6 @@ a.a-block {
margin-top: 6px;
}
.conn-dropdown {
width: 412px;
.lefticon {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
.globe-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
fill: var(--app-text-secondary-color);
}
.status-icon {
position: absolute;
left: 7px;
top: 8px;
circle {
stroke: var(--app-bg-color);
}
}
}
.wave-dropdown-display {
bottom: 7px;
}
}
.tab-colors,
.tab-icons {
display: flex;
flex-direction: row;
align-items: center;
.tab-color-sep,
.tab-icon-sep {
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
user-select: none;
}
.tab-color-icon,
.tab-icon-icon {
width: 1.1em;
vertical-align: middle;
}
.tab-color-name,
.tab-icon-name {
display: inline-block;
margin-left: 1em;
min-width: 70px;
user-select: none;
}
.tab-color-select,
.tab-icon-select {
cursor: pointer;
margin: 3px;
&:hover {
outline: 2px solid white;
}
}
}
.settings-field {
display: flex;
flex-direction: row;
@@ -896,7 +800,6 @@ a.a-block {
display: flex;
flex-direction: row;
align-items: center;
user-select: none;
.info-message {
margin-left: 5px;
}
@@ -923,7 +826,7 @@ a.a-block {
}
}
input:not(.wave-input) {
input {
padding: 4px;
border-radius: 3px;
}
@@ -934,6 +837,42 @@ a.a-block {
}
}
.tab-colors,
.tab-icons {
display: flex;
flex-direction: row;
align-items: center;
.tab-color-sep,
.tab-icon-sep {
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
.tab-color-icon,
.tab-icon-icon {
width: 1.1em;
vertical-align: middle;
}
.tab-color-name,
.tab-icon-name {
display: inline-block;
margin-left: 1em;
min-width: 70px;
}
.tab-color-select,
.tab-icon-select {
cursor: pointer;
margin: 3px;
&:hover {
outline: 2px solid white;
}
}
}
.action-text {
margin-left: 20px;
+15 -39
View File
@@ -8,7 +8,7 @@ import { boundMethod } from "autobind-decorator";
import { If } from "tsx-control-statements/components";
import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";
import { GlobalModel } from "@/models";
import { GlobalCommandRunner, GlobalModel } from "@/models";
import { isBlank } from "@/util/util";
import { WorkspaceView } from "./workspace/workspaceview";
import { PluginsView } from "./pluginsview/pluginsview";
@@ -16,12 +16,10 @@ import { BookmarksView } from "./bookmarks/bookmarks";
import { HistoryView } from "./history/history";
import { ConnectionsView } from "./connections/connections";
import { ClientSettingsView } from "./clientsettings/clientsettings";
import { MainSideBar } from "./sidebar/main";
import { RightSideBar } from "./sidebar/right";
import { DisconnectedModal, ClientStopModal } from "@/modals";
import { ModalsProvider } from "@/modals/provider";
import { Button } from "@/elements";
import { ErrorBoundary } from "@/common/error/errorboundary";
import { MainSideBar } from "./sidebar/sidebar";
import { DisconnectedModal, ClientStopModal } from "./common/modals";
import { ModalsProvider } from "./common/modals/provider";
import { ErrorBoundary } from "./common/error/errorboundary";
import cn from "classnames";
import "./app.less";
@@ -67,17 +65,9 @@ class App extends React.Component<{}, {}> {
}
@boundMethod
openMainSidebar() {
const mainSidebarModel = GlobalModel.mainSidebarModel;
const width = mainSidebarModel.getWidth(true);
mainSidebarModel.saveState(width, false);
}
@boundMethod
openRightSidebar() {
const rightSidebarModel = GlobalModel.rightSidebarModel;
const width = rightSidebarModel.getWidth(true);
rightSidebarModel.saveState(width, false);
openSidebar() {
const width = GlobalModel.mainSidebarModel.getWidth(true);
GlobalCommandRunner.clientSetSidebar(width, false);
}
render() {
@@ -101,7 +91,7 @@ class App extends React.Component<{}, {}> {
return (
<div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
<div ref={this.mainContentRef} className="main-content">
<MainSideBar parentRef={this.mainContentRef} />
<MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
<div className="session-view" />
</div>
<If condition={dcWait}>
@@ -120,38 +110,25 @@ class App extends React.Component<{}, {}> {
}
// used to force a full reload of the application
const renderVersion = GlobalModel.renderVersion.get();
const mainSidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
const activeMainView = GlobalModel.activeMainView.get();
const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
return (
<div
key={"version-" + renderVersion}
id="main"
className={cn(
"platform-" + platform,
{ "mainsidebar-collapsed": mainSidebarCollapsed, "rightsidebar-collapsed": rightSidebarCollapsed },
lightDarkClass
)}
className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed }, lightDarkClass)}
onContextMenu={this.handleContextMenu}
>
<If condition={mainSidebarCollapsed}>
<If condition={sidebarCollapsed}>
<div key="logo-button" className="logo-button-container">
<div className="logo-button-spacer" />
<div className="logo-button" onClick={this.openMainSidebar}>
<div className="logo-button" onClick={this.openSidebar}>
<img src="public/logos/wave-logo.png" alt="logo" />
</div>
</div>
</If>
<If condition={GlobalModel.isDev && rightSidebarCollapsed && activeMainView == "session"}>
<div className="right-sidebar-triggers">
<Button className="secondary ghost right-sidebar-trigger" onClick={this.openRightSidebar}>
<i className="fa-sharp fa-solid fa-sidebar-flip"></i>
</Button>
</div>
</If>
<div ref={this.mainContentRef} className="main-content">
<MainSideBar parentRef={this.mainContentRef} />
<MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
<ErrorBoundary>
<PluginsView />
<WorkspaceView />
@@ -160,7 +137,6 @@ class App extends React.Component<{}, {}> {
<ConnectionsView model={remotesModel} />
<ClientSettingsView model={remotesModel} />
</ErrorBoundary>
<RightSideBar parentRef={this.mainContentRef} />
</div>
<ModalsProvider />
</div>
-5
View File
@@ -64,8 +64,3 @@ export enum StatusIndicatorLevel {
// matches packet.go
export const ErrorCode_InvalidCwd = "ERRCWD";
export const InputAuxView_History = "history";
export const InputAuxView_Info = "info";
export const InputAuxView_AIChat = "aichat";
export const InputAuxView_Suggestions = "suggestions";
+11 -7
View File
@@ -6,11 +6,11 @@
}
.bookmarks-list {
color: var(--app-text-color);
color: var(--bookmarks-text-color);
margin: 4px 10px 5px 5px;
.no-bookmarks {
color: var(--app-text-color);
color: var(--bookmarks-text-color);
padding: 30px 10px 35px 10px;
border-bottom: 1px solid white;
}
@@ -46,21 +46,21 @@
}
label {
color: var(--app-text-color);
color: var(--bookmarks-text-color);
margin-bottom: 4px;
}
textarea {
width: 80%;
min-width: 50%;
color: var(--app-text-color);
background-color: var(--form-element-bg-color);
color: var(--bookmarks-text-color);
background-color: var(--bookmarks-textarea-bg-color);
}
.bookmark-id-div {
display: none;
position: absolute;
color: var(--app-text-disabled-color);
color: var(--bookmarks-disabled-text-color);
right: 5px;
bottom: 2px;
font-size: 0.8em;
@@ -75,7 +75,7 @@
flex-direction: row;
visibility: hidden;
color: var(--app-text-color);
color: var(--bookmarks-text-color);
.bookmark-control:first-child {
margin-left: 0;
@@ -85,6 +85,10 @@
margin-left: 10px;
cursor: pointer;
padding: 2px;
&:hover {
color: var(--bookmarks-control-hover-color);
}
}
}
-56
View File
@@ -22,59 +22,6 @@ type BookmarkProps = {
bookmark: BookmarkType;
};
class BookmarkKeybindings extends React.Component<{}, {}> {
@boundMethod
componentDidMount(): void {
let keybindManager = GlobalModel.keybindManager;
let bookmarksModel = GlobalModel.bookmarksModel;
keybindManager.registerKeybinding("mainview", "bookmarks", "generic:cancel", (waveEvent) => {
bookmarksModel.handleUserClose();
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "generic:deleteItem", (waveEvent) => {
bookmarksModel.handleUserDelete();
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectAbove", (waveEvent) => {
bookmarksModel.handleUserNavigate(-1);
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectBelow", (waveEvent) => {
bookmarksModel.handleUserNavigate(1);
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageAbove", (waveEvent) => {
bookmarksModel.handleUserNavigate(-10);
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "generic:selectPageBelow", (waveEvent) => {
bookmarksModel.handleUserNavigate(10);
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "generic:confirm", (waveEvent) => {
bookmarksModel.handleUserConfirm();
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:edit", (waveEvent) => {
bookmarksModel.handleUserEdit();
return true;
});
keybindManager.registerKeybinding("mainview", "bookmarks", "bookmarks:copy", (waveEvent) => {
bookmarksModel.handleUserCopy();
return true;
});
}
@boundMethod
componentWillUnmount() {
GlobalModel.keybindManager.unregisterDomain("bookmarks");
}
render() {
return null;
}
}
@mobxReact.observer
class Bookmark extends React.Component<BookmarkProps, {}> {
@boundMethod
@@ -247,9 +194,6 @@ class BookmarksView extends React.Component<{}, {}> {
let bookmark: BookmarkType = null;
return (
<MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
<If condition={!isHidden}>
<BookmarkKeybindings></BookmarkKeybindings>
</If>
<div className="bookmarks-list">
<For index="idx" each="bookmark" of={bookmarks}>
<Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />
+17 -121
View File
@@ -5,34 +5,13 @@ import * as React from "react";
import * as mobxReact from "mobx-react";
import * as mobx from "mobx";
import { boundMethod } from "autobind-decorator";
import { If } from "tsx-control-statements/components";
import { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
import { commandRtnHandler, isBlank } from "@/util/util";
import { getTermThemes } from "@/util/themeutil";
import * as appconst from "@/app/appconst";
import { MainView } from "@/common/elements/mainview";
import "./clientsettings.less";
class ClientSettingsKeybindings extends React.Component<{}, {}> {
componentDidMount() {
let clientSettingsViewModel = GlobalModel.clientSettingsViewModel;
let keybindManager = GlobalModel.keybindManager;
keybindManager.registerKeybinding("mainview", "clientsettings", "generic:cancel", (waveEvent) => {
clientSettingsViewModel.closeView();
return true;
});
}
componentWillUnmount() {
GlobalModel.keybindManager.unregisterDomain("clientsettings");
}
render() {
return null;
}
}
import { MainView } from "../common/elements/mainview";
@mobxReact.observer
class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
@@ -65,25 +44,11 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
}
@boundMethod
handleChangeThemeSource(themeSource: NativeThemeSource): void {
if (GlobalModel.getThemeSource() == themeSource) {
handleChangeTheme(theme: string): void {
if (GlobalModel.getTheme() == theme) {
return;
}
const prtn = GlobalCommandRunner.setTheme(themeSource, false);
GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
commandRtnHandler(prtn, this.errorMessage);
}
@boundMethod
handleChangeTermTheme(theme: string): void {
// For global terminal theme, the key is global, otherwise it's either
// sessionId or screenId.
const currTheme = GlobalModel.getTermTheme()["global"];
if (currTheme == theme) {
return;
}
const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
const prtn = GlobalCommandRunner.setTheme(theme, false);
commandRtnHandler(prtn, this.errorMessage);
}
@@ -107,20 +72,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
}
commandRtnHandler(prtn, this.errorMessage);
GlobalModel.getElectronApi().changeAutoUpdate(val);
}
@boundMethod
handleChangeAutocompleteEnabled(val: boolean): void {
const prtn: Promise<CommandRtnType> = GlobalCommandRunner.setAutocompleteEnabled(val);
commandRtnHandler(prtn, this.errorMessage);
}
@boundMethod
handleChangeAutocompleteDebuggingEnabled(val: boolean): void {
mobx.action(() => {
GlobalModel.autocompleteModel.loggingEnabled = val;
})();
getApi().changeAutoUpdate(val);
}
getFontSizes(): DropdownItem[] {
@@ -139,12 +91,11 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
return availableFontFamilies;
}
getThemeSources(): DropdownItem[] {
const themeSources: DropdownItem[] = [];
themeSources.push({ label: "Dark", value: "dark" });
themeSources.push({ label: "Light", value: "light" });
themeSources.push({ label: "System", value: "system" });
return themeSources;
getThemes(): DropdownItem[] {
const themes: DropdownItem[] = [];
themes.push({ label: "Dark", value: "dark" });
themes.push({ label: "Light", value: "light" });
return themes;
}
@boundMethod
@@ -165,12 +116,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
commandRtnHandler(prtn, this.errorMessage);
}
@boundMethod
inlineUpdateOpenAIBaseURL(newBaseURL: string): void {
const prtn = GlobalCommandRunner.setClientOpenAISettings({ baseurl: newBaseURL });
commandRtnHandler(prtn, this.errorMessage);
}
@boundMethod
setErrorMessage(msg: string): void {
mobx.action(() => {
@@ -219,15 +164,10 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
);
const curFontSize = GlobalModel.getTermFontSize();
const curFontFamily = GlobalModel.getTermFontFamily();
const curTheme = GlobalModel.getThemeSource();
const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;
const curTheme = GlobalModel.getTheme();
return (
<MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
<If condition={!isHidden}>
<ClientSettingsKeybindings></ClientSettingsKeybindings>
</If>
<div className="content">
<div className="settings-field">
<div className="settings-label">Term Font Size</div>
@@ -256,25 +196,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
<div className="settings-input">
<Dropdown
className="theme-dropdown"
options={this.getThemeSources()}
options={this.getThemes()}
defaultValue={curTheme}
onChange={this.handleChangeThemeSource}
onChange={this.handleChangeTheme}
/>
</div>
</div>
<If condition={termThemes.length > 0}>
<div className="settings-field">
<div className="settings-label">Terminal Theme</div>
<div className="settings-input">
<Dropdown
className="terminal-theme-dropdown"
options={termThemes}
defaultValue={currTermTheme}
onChange={this.handleChangeTermTheme}
/>
</div>
</div>
</If>
<div className="settings-field">
<div className="settings-label">Client ID</div>
<div className="settings-input">{cdata.clientid}</div>
@@ -305,7 +232,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
</div>
</div>
<div className="settings-field">
<div className="settings-label">AI Token</div>
<div className="settings-label">OpenAI Token</div>
<div className="settings-input">
<InlineSettingsTextEdit
placeholder=""
@@ -318,20 +245,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
</div>
</div>
<div className="settings-field">
<div className="settings-label">AI Base URL</div>
<div className="settings-input">
<InlineSettingsTextEdit
placeholder=""
text={isBlank(openAIOpts.baseurl) ? "openai default" : openAIOpts.baseurl}
value={openAIOpts.baseurl ?? ""}
onChange={this.inlineUpdateOpenAIBaseURL}
maxLength={200}
showIcon={true}
/>
</div>
</div>
<div className="settings-field">
<div className="settings-label">AI Model</div>
<div className="settings-label">OpenAI Model</div>
<div className="settings-input">
<InlineSettingsTextEdit
placeholder="gpt-3.5-turbo"
@@ -344,7 +258,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
</div>
</div>
<div className="settings-field">
<div className="settings-label">AI MaxTokens</div>
<div className="settings-label">OpenAI MaxTokens</div>
<div className="settings-input">
<InlineSettingsTextEdit
placeholder=""
@@ -367,24 +281,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
/>
</div>
</div>
<div className="settings-field">
<div className="settings-label">Command Autocomplete</div>
<div className="settings-input">
<Toggle
checked={cdata.clientopts.autocompleteenabled ?? false}
onChange={this.handleChangeAutocompleteEnabled}
/>
</div>
</div>
<div className="settings-field">
<div className="settings-label">Command Autocomplete Debugging</div>
<div className="settings-input">
<Toggle
checked={GlobalModel.autocompleteModel.loggingEnabled}
onChange={this.handleChangeAutocompleteDebuggingEnabled}
/>
</div>
</div>
<SettingsError errorMessage={this.errorMessage} />
</div>
</MainView>
+30 -81
View File
@@ -1,8 +1,11 @@
.wave-button {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
outline: inherit;
display: flex;
padding: 6px 16px;
align-items: center;
@@ -10,111 +13,57 @@
border-radius: 6px;
height: auto;
line-height: 1.5;
white-space: nowrap;
user-select: none;
color: var(--form-element-text-color);
background: var(--form-element-primary-color);
i {
fill: var(--form-element-text-color);
}
&.primary {
color: var(--form-element-primary-text-color);
background: var(--form-element-primary-color);
i {
fill: var(--form-element-text-color);
}
}
&.primary.danger {
background: var(--app-error-color);
}
&.primary.outlined {
background: none;
border: 1px solid var(--form-element-primary-color);
i {
fill: var(--form-element-primary-color);
}
}
&.primary.greyoutlined {
background: none;
border: 1px solid var(--app-text-secondary-color);
&.solid {
color: var(--form-element-text-color);
background: var(--form-element-primary-color);
i {
fill: var(--app-text-secondary-color);
i {
fill: var(--form-element-text-color);
}
}
}
&.primary.outlined,
&.primary.greyoutlined {
&.hover-danger:hover {
color: var(--form-element-primary-text-color);
border: 1px solid var(--app-error-color);
background: var(--app-error-color);
&.outlined {
border: 1px solid var(--form-element-primary-color);
}
}
&.primary.outlined.danger {
background: none;
border: 1px solid var(--app-error-color);
i {
fill: var(--app-error-color);
&.ghost {
// Styles for .ghost are already defined above
}
}
&.greytext {
color: var(--app-text-secondary-color);
}
&.primary.ghost {
background: none;
i {
fill: var(--form-element-primary-color);
}
}
&.primary.ghost.danger {
background: none;
i {
fill: var(--app-error-color);
&:hover {
color: var(--form-element-text-color);
}
}
&.secondary {
color: var(--form-element-text-color);
background: var(--form-element-secondary-color);
i {
fill: var(--form-element-text-color);
background: none;
&.solid {
color: var(--form-element-text-color);
background: var(--form-element-secondary-color);
box-shadow: none;
}
}
&.secondary.outlined {
background: none;
border: 1px solid var(--form-element-text-color);
}
&.outlined {
border: 1px solid var(--form-element-secondary-color);
}
&.secondary.outlined.danger {
background: none;
border: 1px solid var(--app-error-color);
}
&.ghost {
padding: 6px 10px;
&.secondary.ghost {
background: none;
}
&.secondary.danger {
color: var(--app-error-color);
}
&.small {
padding: 4px 8px;
font-size: 12px;
border-radius: 3.6px;
i {
fill: var(--form-element-primary-color);
}
}
}
&.term-inline {
+37 -8
View File
@@ -1,46 +1,75 @@
// Copyright 2023, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import * as React from "react";
import { boundMethod } from "autobind-decorator";
import cn from "classnames";
import "./button.less";
type ButtonVariantType = "outlined" | "solid" | "ghost";
type ButtonThemeType = "primary" | "secondary";
interface ButtonProps {
theme?: ButtonThemeType;
children: React.ReactNode;
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
onClick?: () => void;
disabled?: boolean;
variant?: ButtonVariantType;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
color?: string;
style?: React.CSSProperties;
autoFocus?: boolean;
className?: string;
termInline?: boolean;
title?: string;
}
class Button extends React.Component<ButtonProps> {
static defaultProps = {
theme: "primary",
variant: "solid",
color: "",
style: {},
className: "primary",
};
@boundMethod
handleClick(e) {
handleClick() {
if (this.props.onClick && !this.props.disabled) {
this.props.onClick(e);
this.props.onClick();
}
}
render() {
const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className, title } = this.props;
const {
leftIcon,
rightIcon,
theme,
children,
disabled,
variant,
color,
style,
autoFocus,
termInline,
className,
} = this.props;
return (
<button
className={cn("wave-button", { disabled }, { "term-inline": termInline }, className)}
className={cn(
"wave-button",
theme,
variant,
color,
{ disabled: disabled },
{ "term-inline": termInline },
className
)}
onClick={this.handleClick}
disabled={disabled}
style={style}
autoFocus={autoFocus}
title={title}
>
{leftIcon && <span className="icon-left">{leftIcon}</span>}
{children}
-7
View File
@@ -1,7 +0,0 @@
.copy-button {
padding: 5px 5px;
.fa-check {
color: var(--app-success-color);
}
}
-51
View File
@@ -1,51 +0,0 @@
import * as React from "react";
import { Button } from "./button";
import { boundMethod } from "autobind-decorator";
import * as mobxReact from "mobx-react";
import * as mobx from "mobx";
import "./copybutton.less";
type CopyButtonProps = {
title: string;
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
@mobxReact.observer
class CopyButton extends React.Component<CopyButtonProps, {}> {
isCopied: OV<boolean> = mobx.observable.box(false, { name: "isCopied" });
@boundMethod
handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
if (this.isCopied.get()) {
return;
}
mobx.action(() => {
this.isCopied.set(true);
})();
setTimeout(() => {
mobx.action(() => {
this.isCopied.set(false);
})();
}, 2000);
if (this.props.onClick) {
this.props.onClick(e);
}
}
render() {
const { title, onClick } = this.props;
const isCopied = this.isCopied.get();
return (
<Button onClick={this.handleOnClick} className="copy-button secondary ghost" title={title}>
{isCopied ? (
<i className="fa-sharp fa-solid fa-check"></i>
) : (
<i className="fa-sharp fa-solid fa-copy"></i>
)}
</Button>
);
}
}
export { CopyButton };
-187
View File
@@ -1,187 +0,0 @@
.day-picker-modal {
background-color: var(--form-element-bg-color);
z-index: 1000;
width: 250px;
height: 293px;
font-size: 13px;
border: 1px solid var(--form-element-border-color);
border-radius: 4px;
color: var(--form-element-text-color);
}
.day-picker-input {
cursor: default;
border: 1px solid var(--form-element-border-color) !important;
height: 34px;
user-select: none;
display: flex;
border-radius: 4px;
justify-content: space-between;
align-items: center;
padding: 0 15px !important;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--form-element-bg-color);
input {
outline: none !important;
border: none !important;
height: 100%;
padding: 0 !important;
cursor: default !important;
background-color: inherit !important;
}
.fa-calendar {
margin-left: 10px;
cursor: pointer;
}
}
.day-picker-header {
color: var(--form-element-text-color);
padding: 10px 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
position: sticky;
div {
cursor: default;
font-weight: bold;
user-select: none;
&.fade {
color: var(--datepicker-header-fade-color);
}
}
.arrows {
display: flex;
.wave-button {
padding: 5px !important;
font-size: 18px !important;
cursor: default !important;
}
}
}
.day-header {
display: flex;
color: var(--form-element-text-color);
padding: 0 10px;
.day-header-cell {
flex: 1;
padding: 10px;
color: var(--form-element-text-color);
text-align: center;
font-weight: bold;
user-select: none;
}
}
.day-picker {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
padding: 0 10px 10px;
.day {
padding: 10px 4px;
color: var(--form-element-text-color);
text-align: center;
cursor: default;
border-radius: 3px;
&:hover {
background-color: var(--datepicker-cell-hover-bg-color);
}
&.selected {
color: var(--form-element-primary-text-color);
background-color: var(--form-element-primary-color);
font-weight: bold;
}
}
.other-month {
color: var(--datepicker-cell-other-text-color);
}
}
.year-month-accordion-wrapper {
overflow-y: auto;
height: 243px;
margin-top: 8px;
padding: 0 10px 10px;
.year-month-accordion {
color: var(--form-element-text-color);
}
.year-header {
padding: 5px 10px;
background-color: var(--datepicker-year-header-bg-color);
border-bottom: 1px solid var(--datepicker-year-header-border-color);
margin-bottom: 5px;
font-weight: bold;
text-align: center;
cursor: default;
color: var(--form-element-text-color);
user-select: none;
&:last-child {
margin-bottom: 0;
}
}
.month-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
cursor: default;
}
.month {
padding: 5px;
text-align: center;
border-radius: 3px;
color: var(--form-element-text-color);
&:hover {
background-color: var(--datepicker-cell-hover-bg-color);
}
&.selected {
color: var(--form-element-primary-text-color);
background-color: var(--form-element-primary-color);
}
}
.expanded {
max-height: 500px;
}
}
.dropdown-arrow {
display: inline-block;
margin-left: 5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--form-element-text-color);
vertical-align: middle;
user-select: none;
&.fade {
border-top: 5px solid var(--datepicker-header-fade-color);
}
}

Some files were not shown because too many files have changed in this diff Show More