Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

update to tab highlighting for active tab. tweak to sidebar logo (no name, fix left next to traffic lights) (#358)

Browse Source
This commit is contained in:
Mike Sawka 2024-02-29 14:53:34 -08:00 committed by GitHub
parent 6c115716b0
commit 5af7d21e4b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,10 +21,11 @@
border-bottom: 1px solid var(--app-border-color);
position: relative;
display: flex;
align-items: center;
.logo {
line-height: 15px;
margin: auto auto;
margin-left: 45px;
margin-top: 4px;
svg {
width: 88px;
}

7
src/app/sidebar/sidebar.tsx
View File

@ -279,12 +279,7 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
<React.Fragment>
<div className="title-bar-drag">
<div className="logo">
<If condition={sidebarWidth > 215}>
<WaveLogoWord />
</If>
<If condition={sidebarWidth <= 215}>
<WaveLogo />
</If>
<WaveLogo />
</div>
<div className="close-button">
<i className="fa-sharp fa-solid fa-xmark-large" onClick={toggleCollapse} />

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

@ -102,13 +102,22 @@
// This applies a transparency mask to the background color, as set above, so that it will blend with whatever the theme's background color is.
z-index: 1;
width: var(--screen-tab-width);
mask-image: linear-gradient(
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0.7) 15%,
rgba(0, 0, 0, 0.5) 30%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 100%);
}
&.is-active {
border-top: none;
opacity: 1;
font-weight: var(--screentabs-selected-font-weight);
border-top: 2px solid var(--tab-color);
}
&.is-archived {
.fa.fa-archive {
margin-right: 4px;
}
}
.screen-tab-inner {
display: flex;
flex-direction: row;
@ -127,18 +136,6 @@
flex-grow: 1;
}
&.is-active {
border-top: none;
opacity: 1;
font-weight: var(--screentabs-selected-font-weight);
}
&.is-archived {
.fa.fa-archive {
margin-right: 4px;
}
}
// Only one of these will be visible at a time
.end-icons {
// This adjusts the position of the icon to account for the default 8px margin on the parent. We want the positional calculations for this icon to assume it is flush with the edge of the screen tab.