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

More UI Updates (flatter look, titlebar/tabs changes) (#338)

Browse Source 
* updates for historyinfo

* cmdinput history fixups, scrollbars

* work with scrollbars

* create another drag region at the end of the tabs bar

* updates for header -- change title drag area, fix corner rounding, tabs spacing, etc.
This commit is contained in:
Mike Sawka 2024-02-26 13:58:32 -08:00 committed by GitHub
parent cbe9acf21b
commit 01e4106aa7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 67 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index-dev.html
View File

@ -13,7 +13,6 @@
</head>
<body>
<div id="measure"></div>
<div id="title-bar"></div>
<div id="app"></div>
</body>
</html>

1
public/index.html
View File

@ -13,7 +13,6 @@
</head>
<body>
<div id="measure"></div>
<div id="title-bar"></div>
<div id="app"></div>
</body>
</html>

55
src/app/app.less
View File

@ -21,6 +21,10 @@ body {
}
}
body .sidebar {
background-color: var(--app-bg-color);
}
textarea {
overflow: hidden;
font-family: @fixed-font;
@ -137,11 +141,35 @@ svg.icon {
}
*::-webkit-scrollbar-track {
background-color: var(--scrollbar-thumb-color) !important;
background-color: var(--scrollbar-background-color) !important;
}
*::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color) !important;
border-radius: 4px;
margin: 0 1px 0 1px;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color) !important;
}
.hide-scrollbar {
&::-webkit-scrollbar {
display: none;
}
}
.wide-scrollbar {
&::-webkit-scrollbar {
width: 12px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
}
.truncate {
@ -176,15 +204,6 @@ svg.icon {
outline: none !important;
}
#title-bar {
-webkit-app-region: drag;
height: 10px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
input[type="checkbox"] {
cursor: pointer;
}
@ -210,10 +229,11 @@ a.a-block {
// main layout
#main {
margin-top: 10px;
height: calc(100vh - 10px);
height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--app-maincontent-bg-color);
border-top: 1px solid var(--app-border-color);
.main-content {
display: flex;
@ -235,17 +255,6 @@ a.a-block {
}
overflow: auto;
}
.main-content-bottom-color {
position: absolute;
width: 100%;
left: 0;
right: 0;
bottom: 0;
height: 30%;
pointer-events: none;
background-color: @main-content-bottom-background;
}
}
}

1
src/app/app.tsx
View File

@ -115,7 +115,6 @@ class App extends React.Component<{}, {}> {
onContextMenu={this.handleContextMenu}
>
<div ref={this.mainContentRef} className="main-content">
<div className="main-content-bottom-color" />
<MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
<ErrorBoundary>
<PluginsView />

15
src/app/line/lines.less
View File

@ -9,19 +9,8 @@
position: relative;
overflow-x: hidden;
&::-webkit-scrollbar-thumb {
background-color: transparent !important;
}
&::-webkit-scrollbar-track {
background-color: transparent !important;
}
&:hover,
&:focus,
&:focus-within {
&::-webkit-scrollbar-thumb {
background-color: var(--app-scrollbar-thumb-color) !important;
}
&.hide-scrollbar::-webkit-scrollbar-thumb {
display: none;
}
.line:nth-child(2) {

2
src/app/line/linesview.tsx
View File

@ -495,7 +495,7 @@ class LinesView extends React.Component<
// let lineElem = <Line key={line.lineid} line={line} screen={screen} width={width} visible={this.visibleMap.get(lineNumStr)} staticRender={this.staticRender.get()} onHeightChange={this.onHeightChange} overrideCollapsed={this.collapsedMap.get(lineNumStr)} topBorder={topBorder} renderMode={renderMode}/>;
lineElements.push(lineElem);
}
let linesClass = cn("lines", renderMode == "normal" ? "lines-expanded" : "lines-collapsed");
let linesClass = cn("lines", renderMode == "normal" ? "lines-expanded" : "lines-collapsed", "wide-scrollbar");
return (
<div key="lines" className={linesClass} onScroll={this.scrollHandler} ref={this.linesRef}>
<div className="lines-spacer"></div>

8
src/app/root.less
View File

@ -20,13 +20,17 @@
--app-border-color: rgb(51, 51, 51);
--app-bg-color: rgba(21, 23, 21, 1);
--app-bg-color-dev: rgba(21, 23, 48, 1);
--app-maincontent-bg-color: #333;
--app-border-radius: 10px;
// global generic colors
--app-black: rgb(0, 0, 0);
// scrollbar colors
--scrollbar-background-color: rgba(21, 23, 21, 1);
--scrollbar-thumb-color: rgb(134, 134, 134);
// --scrollbar-background-color: rgba(21, 23, 21, 1);
--scrollbar-background-color: #171717;
--scrollbar-thumb-color: #333;
--scrollbar-thumb-hover-color: rgb(211, 215, 207);
// code color
--pre-bg-color: rgb(0, 0, 0);

2
src/app/sidebar/sidebar.less
View File

@ -10,7 +10,7 @@
line-height: 20px;
backdrop-filter: blur(4px);
z-index: 20;
border-radius: 10px;
border-radius: var(--app-border-radius) 0 var(--app-border-radius) var(--app-border-radius);
border-left: 1px solid var(--app-border-color);
border-bottom: 1px solid var(--app-border-color);

14
src/app/workspace/cmdinput/cmdinput.less
View File

@ -274,7 +274,8 @@
.cmd-history {
color: var(--app-text-color);
margin-bottom: 5px;
font-family: var(--termfontfamily);
font-size: var(--termfontsize);
overflow: auto;
flex-shrink: 1;
@ -282,14 +283,19 @@
position: absolute;
z-index: 102;
top: 5px;
left: 20px;
background-color: var(--cmdinput-history-bg-color);
left: 0;
background-color: var(--app-black);
color: var(--cmdinput-history-title-color);
padding-bottom: 4px;
display: flex;
flex-direction: row;
width: calc(100% - 40px);
width: 100%;
overflow-x: auto;
border-bottom: 1px solid var(--app-border-color);
div:first-child {
margin-left: var(--termpad);
}
.history-opt {
white-space: nowrap;

4
src/app/workspace/cmdinput/historyinfo.tsx
View File

@ -206,9 +206,9 @@ class HistoryInfo extends React.Component<{}, {}> {
scrNames = GlobalModel.getScreenNames();
}
return (
<div className="cmd-history">
<div className="cmd-history hide-scrollbar">
<div className="history-title">
<div>history</div>
<div className="history-label">history</div>
<div className="spacer"></div>
<div className="history-opt">[for {opts.queryType} &#x2318;S]</div>
<div className="spacer"></div>

13
src/app/workspace/screen/tabs.less
View File

@ -5,6 +5,11 @@
border-top: 1px solid transparent;
font-size: 12.5px;
// this comes back when we have a completely removable left-sidebar
// &:first-child {
// border-radius: var(--app-border-radius) 0px 0px 0px;
// }
&.color-green,
&.color-default {
svg.svg-icon-inner path {
@ -298,8 +303,6 @@
.new-screen {
flex-shrink: 0;
margin-left: 1em;
margin-right: 1em;
cursor: pointer;
display: flex;
align-items: center;
@ -312,4 +315,10 @@
vertical-align: middle;
}
}
.tabs-end-spacer {
flex-grow: 1;
min-width: 20px;
-webkit-app-region: drag;
}
}

1
src/app/workspace/screen/tabs.tsx
View File

@ -205,6 +205,7 @@ class ScreenTabs extends React.Component<
<div key="new-screen" className="new-screen" onClick={this.handleNewScreen}>
<AddIcon className="icon hoverEffect" />
</div>
<div className="tabs-end-spacer" />
</div>
);
}

3
src/app/workspace/workspace.less
View File

@ -8,8 +8,7 @@
&.is-hidden {
display: none;
}
border-radius: 10px;
border-radius: 0 0 6px 6px;
border-radius: 0 var(--app-border-radius) var(--app-border-radius) var(--app-border-radius);
border-bottom: 1px solid var(--app-border-color);
border-right: 1px solid var(--app-border-color);
border-left: 1px solid var(--app-border-color);