mirror of
https://github.com/wavetermdev/backup.git
synced 2026-04-22 15:26:58 -07:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sylvia Crowe
|
3135a3cd76 |
@@ -41,7 +41,6 @@ jobs:
|
||||
cd scripthaus;
|
||||
go get ./...;
|
||||
CGO_ENABLED=1 go build -o scripthaus cmd/main.go
|
||||
echo $PWD >> $GITHUB_PATH
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{env.NODE_VERSION}}
|
||||
@@ -54,7 +53,7 @@ jobs:
|
||||
- name: Install Yarn Dependencies
|
||||
run: yarn --frozen-lockfile
|
||||
- name: Build ${{ matrix.platform }}/${{ matrix.arch }}
|
||||
run: scripthaus run ${{ matrix.scripthaus }}
|
||||
run: ./scripthaus/scripthaus run ${{ matrix.scripthaus }}
|
||||
env:
|
||||
GOARCH: ${{ matrix.arch }}
|
||||
CSC_LINK: ${{ matrix.platform == 'darwin' && secrets.PROD_MACOS_CERTIFICATE}}
|
||||
|
||||
@@ -47,32 +47,6 @@ jobs:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Checkout Scripthaus (Go only)
|
||||
if: matrix.language == 'go'
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
repository: scripthaus-dev/scripthaus
|
||||
path: scripthaus
|
||||
|
||||
- name: Setup Go (Go only)
|
||||
uses: actions/setup-go@v5
|
||||
if: matrix.language == 'go'
|
||||
with:
|
||||
go-version: stable
|
||||
cache-dependency-path: |
|
||||
wavesrv/go.sum
|
||||
waveshell/go.sum
|
||||
scripthaus/go.sum
|
||||
|
||||
- name: Install Scripthaus (Go only)
|
||||
if: matrix.language == 'go'
|
||||
run: |
|
||||
go work use ./scripthaus;
|
||||
cd scripthaus;
|
||||
go get ./...;
|
||||
CGO_ENABLED=1 go build -o scripthaus cmd/main.go
|
||||
echo $PWD >> $GITHUB_PATH
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@v3
|
||||
@@ -87,14 +61,9 @@ jobs:
|
||||
|
||||
# Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
|
||||
# If this step fails, then you should remove it and run the build manually (see below)
|
||||
- name: Autobuild (not Go)
|
||||
if: matrix.language != 'go'
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@v3
|
||||
|
||||
- name: Build (Go only)
|
||||
if: matrix.language == 'go'
|
||||
run: scripthaus run build-backend
|
||||
|
||||
# ℹ️ Command-line programs to run using the OS shell.
|
||||
# đź“š See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
|
||||
|
||||
|
||||
@@ -3,10 +3,6 @@
|
||||
"command": "system:toggleDeveloperTools",
|
||||
"keys": ["Cmd:Option:i"]
|
||||
},
|
||||
{
|
||||
"command": "system:hideWindow",
|
||||
"keys": ["Cmd:m"]
|
||||
},
|
||||
{
|
||||
"command": "generic:cancel",
|
||||
"keys": ["Escape"]
|
||||
@@ -36,7 +32,7 @@
|
||||
"keys": ["PageDown"]
|
||||
},
|
||||
{
|
||||
"command": "app:openHistoryView",
|
||||
"command": "app:openHistory",
|
||||
"keys": ["Cmd:h"]
|
||||
},
|
||||
{
|
||||
@@ -45,13 +41,11 @@
|
||||
},
|
||||
{
|
||||
"command": "app:openConnectionsView",
|
||||
"keys": [],
|
||||
"commandStr": "/mainview connections"
|
||||
"keys": []
|
||||
},
|
||||
{
|
||||
"command": "app:openSettingsView",
|
||||
"keys": [],
|
||||
"commandStr": "/mainview clientsettings"
|
||||
"keys": []
|
||||
},
|
||||
{
|
||||
"command": "app:newTab",
|
||||
@@ -87,48 +81,39 @@
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-1",
|
||||
"keys": ["Cmd:1"],
|
||||
"commandStr":"/screen 1"
|
||||
"keys": ["Cmd:1"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-2",
|
||||
"keys": ["Cmd:2"],
|
||||
"commandStr":"/screen 2"
|
||||
"keys": ["Cmd:2"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-3",
|
||||
"keys": ["Cmd:3"],
|
||||
"commandStr":"/screen 3"
|
||||
"keys": ["Cmd:3"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-4",
|
||||
"keys": ["Cmd:4"],
|
||||
"commandStr":"/screen 4"
|
||||
"keys": ["Cmd:4"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-5",
|
||||
"keys": ["Cmd:5"],
|
||||
"commandStr":"/screen 5"
|
||||
"keys": ["Cmd:5"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-6",
|
||||
"keys": ["Cmd:6"],
|
||||
"commandStr":"/screen 6"
|
||||
"keys": ["Cmd:6"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-7",
|
||||
"keys": ["Cmd:7"],
|
||||
"commandStr":"/screen 7"
|
||||
"keys": ["Cmd:7"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-8",
|
||||
"keys": ["Cmd:8"],
|
||||
"commandStr":"/screen 8"
|
||||
"keys": ["Cmd:8"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTab-9",
|
||||
"keys": ["Cmd:9"],
|
||||
"commandStr":"/screen 9"
|
||||
"keys": ["Cmd:9"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectTabLeft",
|
||||
@@ -140,48 +125,39 @@
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-1",
|
||||
"keys": ["Cmd:Ctrl:1"],
|
||||
"commandStr": "/session 1"
|
||||
"keys": ["Cmd:Ctrl:1"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-2",
|
||||
"keys": ["Cmd:Ctrl:2"],
|
||||
"commandStr": "/session 2"
|
||||
"keys": ["Cmd:Ctrl:2"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-3",
|
||||
"keys": ["Cmd:Ctrl:3"],
|
||||
"commandStr": "/session 3"
|
||||
"keys": ["Cmd:Ctrl:3"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-4",
|
||||
"keys": ["Cmd:Ctrl:4"],
|
||||
"commandStr": "/session 4"
|
||||
"keys": ["Cmd:Ctrl:4"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-5",
|
||||
"keys": ["Cmd:Ctrl:5"],
|
||||
"commandStr": "/session 5"
|
||||
"keys": ["Cmd:Ctrl:5"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-6",
|
||||
"keys": ["Cmd:Ctrl:6"],
|
||||
"commandStr": "/session 6"
|
||||
"keys": ["Cmd:Ctrl:6"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-7",
|
||||
"keys": ["Cmd:Ctrl:7"],
|
||||
"commandStr": "/session 7"
|
||||
"keys": ["Cmd:Ctrl:7"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-8",
|
||||
"keys": ["Cmd:Ctrl:8"],
|
||||
"commandStr": "/session 8"
|
||||
"keys": ["Cmd:Ctrl:8"]
|
||||
},
|
||||
{
|
||||
"command": "app:selectWorkspace-9",
|
||||
"keys": ["Cmd:Ctrl:9"],
|
||||
"commandStr": "/session 9"
|
||||
"keys": ["Cmd:Ctrl:9"]
|
||||
},
|
||||
{
|
||||
"command": "app:toggleSidebar",
|
||||
@@ -192,9 +168,8 @@
|
||||
"keys": ["Cmd:d"]
|
||||
},
|
||||
{
|
||||
"command": "app:openBookmarksView",
|
||||
"keys": ["Cmd:b"],
|
||||
"commandStr": "/bookmarks:show"
|
||||
"command": "app:bookmarkActiveLine",
|
||||
"keys": ["Cmd:b"]
|
||||
},
|
||||
{
|
||||
"command": "bookmarks:edit",
|
||||
@@ -238,8 +213,7 @@
|
||||
},
|
||||
{
|
||||
"command": "cmdinput:openHistory",
|
||||
"keys": ["Ctrl:r"],
|
||||
"commandStr": "/history"
|
||||
"keys": ["Ctrl:r"]
|
||||
},
|
||||
{
|
||||
"command": "cmdinput:openAIChat",
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"productName": "Wave",
|
||||
"description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
|
||||
"version": "0.7.1",
|
||||
"version": "0.7.0",
|
||||
"main": "dist/emain.js",
|
||||
"license": "Apache-2.0",
|
||||
"repository": {
|
||||
|
||||
@@ -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/default.css" />
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="public/themes/default.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="measure"></div>
|
||||
|
||||
+56
-22
@@ -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,18 +44,16 @@
|
||||
--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-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-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-border-color: rgb(51, 51, 51);
|
||||
--app-maincontent-bg-color: #333;
|
||||
--app-panel-bg-color: rgba(21, 23, 21, 1);
|
||||
@@ -54,16 +62,16 @@
|
||||
--app-icon-hover-color: #fff;
|
||||
--app-selected-mask-color: rgba(255, 255, 255, 0.06);
|
||||
|
||||
/* global status colors */
|
||||
--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);
|
||||
/* 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);
|
||||
@@ -104,9 +112,28 @@
|
||||
--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);
|
||||
@@ -125,6 +152,7 @@
|
||||
--line-text-color: rgb(211, 215, 207);
|
||||
--line-svg-fill-color: rgb(150, 152, 150);
|
||||
--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);
|
||||
@@ -147,6 +175,17 @@
|
||||
--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);
|
||||
@@ -157,6 +196,9 @@
|
||||
--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-textarea-bg-color: #171717;
|
||||
--cmdinput-text-error-color: var(--term-red);
|
||||
@@ -177,13 +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 */
|
||||
--logo-button-hover-bg-color: #1e1e1e;
|
||||
}
|
||||
|
||||
+5
-11
@@ -23,13 +23,15 @@
|
||||
|
||||
/* 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);
|
||||
--table-thead-border-bottom-color: rgba(0, 0, 0, 0.3);
|
||||
@@ -68,16 +70,8 @@
|
||||
--line-actions-inactive-color: rgba(0, 0, 0, 0.3);
|
||||
--line-actions-active-color: rgba(0, 0, 0, 1);
|
||||
|
||||
--logo-button-hover-bg-color: #f0f0f0;
|
||||
|
||||
--xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
--datepicker-cell-hover-bg-color: #f0f0f0;
|
||||
--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: #f5f5f5;
|
||||
--datepicker-year-header-border-color: #dcdcdc;
|
||||
|
||||
/* toggle colors */
|
||||
--toggle-thumb-color: var(--app-bg-color);
|
||||
|
||||
--logo-button-hover-bg-color: #f0f0f0;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+4
-27
@@ -101,7 +101,6 @@ body input.input {
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
line-height: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.text-s1.icon {
|
||||
@@ -303,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;
|
||||
@@ -736,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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -820,7 +800,6 @@ a.a-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
.info-message {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@@ -869,7 +848,6 @@ a.a-block {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tab-color-icon,
|
||||
@@ -883,7 +861,6 @@ a.a-block {
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
min-width: 70px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tab-color-select,
|
||||
|
||||
+11
-35
@@ -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() {
|
||||
@@ -120,36 +110,23 @@ 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 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-regular fa-lightbulb"></i>
|
||||
</Button>
|
||||
</div>
|
||||
</If>
|
||||
<div ref={this.mainContentRef} className="main-content">
|
||||
<MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
|
||||
<ErrorBoundary>
|
||||
@@ -160,7 +137,6 @@ class App extends React.Component<{}, {}> {
|
||||
<ConnectionsView model={remotesModel} />
|
||||
<ClientSettingsView model={remotesModel} />
|
||||
</ErrorBoundary>
|
||||
<RightSideBar parentRef={this.mainContentRef} clientData={clientData} />
|
||||
</div>
|
||||
<ModalsProvider />
|
||||
</div>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -246,10 +193,7 @@ class BookmarksView extends React.Component<{}, {}> {
|
||||
let bookmarks = GlobalModel.bookmarksModel.bookmarks;
|
||||
let bookmark: BookmarkType = null;
|
||||
return (
|
||||
<MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
|
||||
<If condition={!isHidden}>
|
||||
<BookmarkKeybindings></BookmarkKeybindings>
|
||||
</If>
|
||||
<MainView viewName="bookmarks" title="Bookmarks" onClose={this.handleClose}>
|
||||
<div className="bookmarks-list">
|
||||
<For index="idx" each="bookmark" of={bookmarks}>
|
||||
<Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />
|
||||
|
||||
@@ -5,7 +5,6 @@ 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, getApi } from "@/models";
|
||||
import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
|
||||
import { commandRtnHandler, isBlank } from "@/util/util";
|
||||
@@ -14,25 +13,6 @@ import * as appconst from "@/app/appconst";
|
||||
import "./clientsettings.less";
|
||||
import { MainView } from "../common/elements/mainview";
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
|
||||
errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
|
||||
@@ -136,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(() => {
|
||||
@@ -194,9 +168,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
|
||||
|
||||
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>
|
||||
@@ -261,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=""
|
||||
@@ -274,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={10}
|
||||
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"
|
||||
@@ -300,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=""
|
||||
|
||||
@@ -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,65 +13,57 @@
|
||||
border-radius: 6px;
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
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-text-color);
|
||||
background: var(--form-element-primary-color);
|
||||
i {
|
||||
fill: var(--form-element-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.outlined {
|
||||
background: none;
|
||||
border: 1px solid var(--form-element-primary-color);
|
||||
|
||||
i {
|
||||
fill: var(--form-element-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary.ghost {
|
||||
background: none;
|
||||
i {
|
||||
fill: var(--form-element-primary-color);
|
||||
&.solid {
|
||||
color: var(--form-element-text-color);
|
||||
background: var(--form-element-primary-color);
|
||||
|
||||
i {
|
||||
fill: var(--form-element-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
border: 1px solid var(--form-element-primary-color);
|
||||
}
|
||||
|
||||
&.ghost {
|
||||
// Styles for .ghost are already defined above
|
||||
}
|
||||
|
||||
&: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.ghost {
|
||||
background: none;
|
||||
}
|
||||
&.ghost {
|
||||
padding: 6px 10px;
|
||||
|
||||
&.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 {
|
||||
|
||||
@@ -1,15 +1,24 @@
|
||||
// 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?: () => void;
|
||||
disabled?: boolean;
|
||||
variant?: ButtonVariantType;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
color?: string;
|
||||
style?: React.CSSProperties;
|
||||
autoFocus?: boolean;
|
||||
className?: string;
|
||||
@@ -18,8 +27,10 @@ interface ButtonProps {
|
||||
|
||||
class Button extends React.Component<ButtonProps> {
|
||||
static defaultProps = {
|
||||
theme: "primary",
|
||||
variant: "solid",
|
||||
color: "",
|
||||
style: {},
|
||||
className: "primary",
|
||||
};
|
||||
|
||||
@boundMethod
|
||||
@@ -30,11 +41,31 @@ class Button extends React.Component<ButtonProps> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className } = 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}
|
||||
|
||||
@@ -1,183 +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;
|
||||
|
||||
input {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
cursor: default !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 {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -1,446 +0,0 @@
|
||||
import React, { useState, useEffect, useRef, createRef } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import dayjs from "dayjs";
|
||||
import cs from "classnames";
|
||||
import { Button } from "@/elements";
|
||||
import { If } from "tsx-control-statements/components";
|
||||
|
||||
import "./datepicker.less";
|
||||
|
||||
interface YearRefs {
|
||||
[key: number]: React.RefObject<HTMLDivElement>;
|
||||
}
|
||||
|
||||
type DatePickerProps = {
|
||||
selectedDate: Date;
|
||||
onSelectDate: (date: Date) => void;
|
||||
format?: string;
|
||||
};
|
||||
|
||||
const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/YYYY", onSelectDate }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selDate, setSelDate] = useState(dayjs(selectedDate)); // Initialize with dayjs object
|
||||
const [showYearAccordion, setShowYearAccordion] = useState(false);
|
||||
const [expandedYear, setExpandedYear] = useState<number | null>(selDate.year());
|
||||
const yearRefs = useRef<YearRefs>({});
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const calendarIconRef = useRef(null);
|
||||
const inputRefs = useRef({ YYYY: null, MM: null, DD: null });
|
||||
// Extract delimiter using regex
|
||||
const delimiter = format.replace(/[0-9YMD]/g, "")[0] || "/";
|
||||
// Split format and create state for each part
|
||||
const formatParts = format.split(delimiter);
|
||||
const [dateParts, setDateParts] = useState({
|
||||
YYYY: selDate.format("YYYY"),
|
||||
MM: selDate.format("MM"),
|
||||
DD: selDate.format("DD"),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
inputRefs.current = {
|
||||
YYYY: createRef(),
|
||||
MM: createRef(),
|
||||
DD: createRef(),
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (showYearAccordion && expandedYear && yearRefs.current[expandedYear]) {
|
||||
yearRefs.current[expandedYear].current?.scrollIntoView({
|
||||
block: "nearest",
|
||||
});
|
||||
}
|
||||
}, [showYearAccordion, expandedYear]);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setDateParts({
|
||||
YYYY: selDate.format("YYYY"),
|
||||
MM: selDate.format("MM"),
|
||||
DD: selDate.format("DD"),
|
||||
});
|
||||
}, [selDate]);
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
// Check if the click is on the calendar icon
|
||||
if (calendarIconRef.current && calendarIconRef.current.contains(event.target as Node)) {
|
||||
// Click is on the calendar icon, do nothing
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if the click is outside the modal
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false); // Close the modal
|
||||
}
|
||||
};
|
||||
|
||||
const handleDayClick = (date: Date) => {
|
||||
const newDate = dayjs(date);
|
||||
setSelDate(newDate); // Update selDate with the new dayjs object
|
||||
onSelectDate && onSelectDate(date); // Call parent's onSelectDate
|
||||
setIsOpen(false); // Close the picker
|
||||
};
|
||||
|
||||
const changeMonth = (delta: number) => {
|
||||
const newDate = selDate.add(delta, "month");
|
||||
setSelDate(newDate);
|
||||
onSelectDate && onSelectDate(newDate.toDate());
|
||||
};
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
<div className="day-picker-header">
|
||||
<div
|
||||
className={cs({ fade: showYearAccordion })}
|
||||
onClick={() => {
|
||||
if (!showYearAccordion) {
|
||||
setExpandedYear(selDate.year()); // Set expandedYear when opening accordion
|
||||
}
|
||||
setShowYearAccordion(!showYearAccordion);
|
||||
}}
|
||||
>
|
||||
{selDate.format("MMMM YYYY")}
|
||||
<span className={cs("dropdown-arrow", { fade: showYearAccordion })}></span>
|
||||
</div>
|
||||
<If condition={!showYearAccordion}>
|
||||
<div className="arrows">
|
||||
<Button className="secondary ghost" onClick={() => changeMonth(-1)}>
|
||||
↑
|
||||
</Button>
|
||||
<Button className="secondary ghost" onClick={() => changeMonth(1)}>
|
||||
↓
|
||||
</Button>
|
||||
</div>
|
||||
</If>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDayHeaders = () => {
|
||||
const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"]; // First letter of each day
|
||||
return (
|
||||
<div className="day-header">
|
||||
{daysOfWeek.map((day, i) => (
|
||||
<div key={`${day}-${i}`} className="day-header-cell">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDays = () => {
|
||||
const days = [];
|
||||
const startDay = selDate.startOf("month");
|
||||
const endDay = selDate.endOf("month");
|
||||
const startDate = startDay.day(); // 0 for Sunday, 1 for Monday, ..., 6 for Saturday
|
||||
|
||||
// Previous month's filler days
|
||||
const previousMonth = startDay.subtract(1, "month");
|
||||
const daysInPreviousMonth = previousMonth.daysInMonth();
|
||||
for (let i = daysInPreviousMonth - startDate + 1; i <= daysInPreviousMonth; i++) {
|
||||
const dayDate = previousMonth.date(i);
|
||||
days.push(
|
||||
<div
|
||||
key={`prev-month-day-${i}`}
|
||||
className="day other-month"
|
||||
onClick={() => handleDayClick(dayDate.toDate())}
|
||||
>
|
||||
{i}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Current month's days
|
||||
for (
|
||||
let dayCount = 1;
|
||||
startDay.add(dayCount - 1, "day").isBefore(endDay) ||
|
||||
startDay.add(dayCount - 1, "day").isSame(endDay, "day");
|
||||
dayCount++
|
||||
) {
|
||||
const currentDate = startDay.add(dayCount - 1, "day");
|
||||
days.push(
|
||||
<div
|
||||
key={dayCount}
|
||||
className={`day ${selDate.isSame(currentDate, "day") ? "selected" : ""}`}
|
||||
onClick={() => handleDayClick(currentDate.toDate())}
|
||||
>
|
||||
{dayCount}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Next month's filler days
|
||||
while (days.length < 42) {
|
||||
const fillerDayCount = days.length - daysInPreviousMonth - endDay.date();
|
||||
const dayDate = endDay.add(fillerDayCount + 1, "day");
|
||||
days.push(
|
||||
<div
|
||||
key={`next-month-day-${dayDate.format("YYYY-MM-DD")}`}
|
||||
className="day other-month"
|
||||
onClick={() => handleDayClick(dayDate.toDate())}
|
||||
>
|
||||
{dayDate.date()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return days;
|
||||
};
|
||||
|
||||
const calculatePosition = (): React.CSSProperties => {
|
||||
if (wrapperRef.current) {
|
||||
const rect = wrapperRef.current.getBoundingClientRect();
|
||||
return {
|
||||
position: "absolute",
|
||||
top: `${rect.bottom + window.scrollY + 2}px`,
|
||||
left: `${rect.left + window.scrollX}px`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const populateYears = () => {
|
||||
const currentYear = dayjs().year();
|
||||
const startYear = currentYear - 10;
|
||||
const endYear = currentYear + 10;
|
||||
const yearsRange = [];
|
||||
|
||||
for (let year = startYear; year <= endYear; year++) {
|
||||
yearsRange.push(year);
|
||||
yearRefs.current[year] = React.createRef();
|
||||
}
|
||||
|
||||
return yearsRange;
|
||||
};
|
||||
|
||||
const handleMonthYearSelect = (month: number, year: number) => {
|
||||
const newDate = dayjs(new Date(year, month - 1));
|
||||
setSelDate(newDate);
|
||||
setShowYearAccordion(false); // Close accordion
|
||||
onSelectDate && onSelectDate(newDate.toDate());
|
||||
};
|
||||
|
||||
const renderYearMonthAccordion = () => {
|
||||
const years = populateYears();
|
||||
const currentYear = selDate.year();
|
||||
|
||||
return (
|
||||
<div className="year-month-accordion-wrapper">
|
||||
<div className="year-month-accordion">
|
||||
{years.map((year) => (
|
||||
<div key={year} ref={yearRefs.current[year]}>
|
||||
<div
|
||||
className="year-header"
|
||||
data-year={year}
|
||||
onClick={() => setExpandedYear(year === expandedYear ? null : year)}
|
||||
>
|
||||
{year}
|
||||
</div>
|
||||
<If condition={expandedYear === year}>
|
||||
<div
|
||||
className={cs("month-container", {
|
||||
expanded: expandedYear === year,
|
||||
})}
|
||||
>
|
||||
{Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
|
||||
<div
|
||||
key={month}
|
||||
className={cs("month", {
|
||||
selected: year === currentYear && month === selDate.month() + 1,
|
||||
})}
|
||||
onClick={() => handleMonthYearSelect(month, year)}
|
||||
>
|
||||
{dayjs(new Date(year, month - 1)).format("MMM")}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</If>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const toggleModal = () => {
|
||||
setIsOpen((prevIsOpen) => !prevIsOpen);
|
||||
setShowYearAccordion(false);
|
||||
};
|
||||
|
||||
const dayPickerModal = isOpen
|
||||
? ReactDOM.createPortal(
|
||||
<div ref={modalRef} className="day-picker-modal" style={calculatePosition()}>
|
||||
{renderHeader()}
|
||||
{showYearAccordion && renderYearMonthAccordion()}
|
||||
<If condition={!showYearAccordion}>
|
||||
<>
|
||||
{renderDayHeaders()}
|
||||
<div className="day-picker">{renderDays()}</div>
|
||||
</>
|
||||
</If>
|
||||
</div>,
|
||||
document.getElementById("app")!
|
||||
)
|
||||
: null;
|
||||
|
||||
const handleDatePartChange = (part, value) => {
|
||||
const newDateParts = { ...dateParts, [part]: value };
|
||||
setDateParts(newDateParts);
|
||||
|
||||
// Construct a new date from the updated parts
|
||||
const newDate = dayjs(`${newDateParts.YYYY}-${newDateParts.MM}-${newDateParts.DD}`);
|
||||
if (newDate.isValid()) {
|
||||
onSelectDate(newDate.toDate()); // Call onSelectDate with the new date
|
||||
}
|
||||
};
|
||||
|
||||
const handleArrowNavigation = (event, currentPart) => {
|
||||
const currentIndex = formatParts.indexOf(currentPart);
|
||||
let targetInput;
|
||||
|
||||
if (event.key === "ArrowLeft" && currentIndex > 0) {
|
||||
targetInput = inputRefs.current[formatParts[currentIndex - 1]].current;
|
||||
} else if (event.key === "ArrowRight" && currentIndex < formatParts.length - 1) {
|
||||
targetInput = inputRefs.current[formatParts[currentIndex + 1]].current;
|
||||
}
|
||||
|
||||
if (targetInput) {
|
||||
targetInput.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event, currentPart) => {
|
||||
const key = event.key;
|
||||
|
||||
if (key === "ArrowLeft" || key === "ArrowRight") {
|
||||
// Handle arrow navigation without selecting text
|
||||
handleArrowNavigation(event, currentPart);
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === " ") {
|
||||
// Handle spacebar press to toggle the modal
|
||||
toggleModal();
|
||||
return;
|
||||
}
|
||||
|
||||
if (key.match(/[0-9]/)) {
|
||||
// Handle numeric keys
|
||||
event.preventDefault();
|
||||
const maxLength = currentPart === "YYYY" ? 4 : 2;
|
||||
const newValue = event.target.value.length < maxLength ? event.target.value + key : key;
|
||||
let selectionTimeoutId = null;
|
||||
handleDatePartChange(currentPart, newValue);
|
||||
|
||||
// Clear any existing timeout
|
||||
if (selectionTimeoutId !== null) {
|
||||
clearTimeout(selectionTimeoutId);
|
||||
}
|
||||
|
||||
// Re-focus and select the input after state update
|
||||
selectionTimeoutId = setTimeout(() => {
|
||||
event.target.focus();
|
||||
event.target.select();
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFocus = (event) => {
|
||||
event.target.select();
|
||||
};
|
||||
|
||||
// Prevent use from selecting text in the input
|
||||
const handleMouseDown = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
handleFocus(event);
|
||||
};
|
||||
|
||||
const handleIconKeyDown = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
toggleModal();
|
||||
}
|
||||
};
|
||||
|
||||
const setInputWidth = (inputRef, value) => {
|
||||
const span = document.createElement("span");
|
||||
document.body.appendChild(span);
|
||||
span.style.font = "inherit";
|
||||
span.style.visibility = "hidden";
|
||||
span.style.position = "absolute";
|
||||
span.textContent = value;
|
||||
const textWidth = span.offsetWidth;
|
||||
document.body.removeChild(span);
|
||||
|
||||
if (inputRef.current) {
|
||||
inputRef.current.style.width = `${textWidth}px`;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// This timeout ensures that the effect runs after the DOM updates
|
||||
const timeoutId = setTimeout(() => {
|
||||
formatParts.forEach((part) => {
|
||||
const inputRef = inputRefs.current[part];
|
||||
if (inputRef && inputRef.current) {
|
||||
setInputWidth(inputRef, dateParts[part]);
|
||||
}
|
||||
});
|
||||
}, 0);
|
||||
|
||||
return () => clearTimeout(timeoutId); // Cleanup timeout on unmount
|
||||
}, []);
|
||||
|
||||
const renderDatePickerInput = () => {
|
||||
return (
|
||||
<div className="day-picker-input">
|
||||
{formatParts.map((part, index) => {
|
||||
const inputRef = inputRefs.current[part];
|
||||
|
||||
return (
|
||||
<React.Fragment key={part}>
|
||||
{index > 0 && <span>{delimiter}</span>}
|
||||
<input
|
||||
readOnly
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={dateParts[part]}
|
||||
onChange={(e) => handleDatePartChange(part, e.target.value)}
|
||||
onKeyDown={(e) => handleKeyDown(e, part)}
|
||||
onMouseDown={handleMouseDown}
|
||||
onFocus={handleFocus}
|
||||
maxLength={part === "YYYY" ? 4 : 2}
|
||||
className="date-input"
|
||||
placeholder={part}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<i
|
||||
ref={calendarIconRef}
|
||||
className="fa-sharp fa-regular fa-calendar"
|
||||
onClick={toggleModal}
|
||||
onKeyDown={handleIconKeyDown}
|
||||
tabIndex={0} // Makes the icon focusable
|
||||
role="button" // Semantic role for accessibility
|
||||
aria-label="Toggle date picker" // Accessible label for screen readers
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={wrapperRef}>
|
||||
{renderDatePickerInput()}
|
||||
{dayPickerModal}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { DatePicker };
|
||||
@@ -20,7 +20,6 @@
|
||||
transition: all 0.3s;
|
||||
color: var(--form-element-label-color);
|
||||
line-height: 10px;
|
||||
user-select: none;
|
||||
|
||||
&.float {
|
||||
font-size: 10px;
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
// Copyright 2023, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import * as React from "react";
|
||||
import { Button } from "./button";
|
||||
class IconButton extends Button {
|
||||
render() {
|
||||
const { children, theme, variant = "solid", ...rest } = this.props;
|
||||
const className = `wave-button icon-button ${theme} ${variant}`;
|
||||
|
||||
return (
|
||||
<button {...rest} className={className}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default IconButton;
|
||||
|
||||
export { IconButton };
|
||||
@@ -3,6 +3,7 @@ export { Checkbox } from "./checkbox";
|
||||
export { CmdStrCode } from "./cmdstrcode";
|
||||
export { renderCmdText } from "./cmdtext";
|
||||
export { Dropdown } from "./dropdown";
|
||||
export { IconButton } from "./iconbutton";
|
||||
export { InlineSettingsTextEdit } from "./inlinesettingstextedit";
|
||||
export { InputDecoration } from "./inputdecoration";
|
||||
export { LinkButton } from "./linkbutton";
|
||||
@@ -17,4 +18,3 @@ export { TextField } from "./textfield";
|
||||
export { Toggle } from "./toggle";
|
||||
export { Tooltip } from "./tooltip";
|
||||
export { TabIcon } from "./tabicon";
|
||||
export { DatePicker } from "./datepicker";
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user