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

fix blocks blurry border (#104)

Browse Source
This commit is contained in:
Red J Adaya 2024-07-09 13:31:38 +08:00 committed by GitHub
parent c57c7ea220
commit 6d6102b912
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 199 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/app/app.less
View File

@ -22,17 +22,17 @@ body {
}
*::-webkit-scrollbar-track {
background-color: var(--scrollbar-background-color) !important;
background-color: var(--scrollbar-background-color);
}
*::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color) !important;
background-color: var(--scrollbar-thumb-color);
border-radius: 4px;
margin: 0 1px 0 1px;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color) !important;
background-color: var(--scrollbar-thumb-hover-color);
}
.flex-spacer {
@ -61,3 +61,18 @@ body {
--os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
--os-handle-bg-active: var(--scrollbar-thumb-active-color);
}
.scrollbar-hide-until-hover {
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
display: none;
}
*::-webkit-scrollbar-corner {
display: none;
}
*:hover::-webkit-scrollbar-thumb {
display: block;
}
}

237
frontend/app/block/block.less
View File

@ -12,7 +12,6 @@
min-height: 0;
position: relative;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.1);
.block-frame-icon {
margin-right: 0.5em;
@ -56,117 +55,145 @@
}
&.block-frame-default {
border: 2px solid transparent;
position: relative;
padding: 2px;
.block-frame-default-inner {
background-color: rgba(255, 255, 255, 0.05);
width: 100%;
height: 100%;
border-radius: 8px;
display: flex;
flex-direction: column;
.block-frame-default-header {
display: flex;
height: 34px;
padding: 4px 0 4px 10px;
align-items: center;
gap: 8px;
align-self: stretch;
font: var(--header-font);
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px 8px 0 0;
.block-frame-default-header-iconview {
display: flex;
align-items: center;
gap: 8px;
color: var(--main-text-color);
.block-frame-preicon-button {
opacity: 0.7;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.block-frame-view-icon {
font-size: var(--header-icon-size);
opacity: 0.5;
width: var(--header-icon-width);
i {
margin-right: 0;
}
}
.block-frame-view-type {
line-height: 12px;
font-weight: 700;
}
.block-frame-blockid {
opacity: 0.5;
}
}
.block-frame-text {
font: var(--fixed-font);
font-size: 11px;
opacity: 0.7;
}
.block-frame-end-icons {
display: flex;
align-items: center;
.block-frame-endicon-button {
opacity: 0.7;
cursor: pointer;
padding: 4px 6px;
&:hover {
opacity: 1;
}
}
.block-frame-settings {
display: flex;
width: 24px;
padding: 6px;
justify-content: center;
align-items: center;
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.block-frame-default-close {
display: flex;
justify-content: center;
align-items: center;
opacity: 0.5;
font-size: 11px;
width: 24px;
padding: 4px 6px;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
}
.block-frame-preview {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
flex-grow: 1;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
.block-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
pointer-events: none;
padding: 2px;
border-radius: 8px;
}
&.block-focused {
border: 2px solid var(--accent-color);
.block-mask {
border: 2px solid var(--accent-color);
}
&.block-no-highlight,
&.block-preview {
border: 2px solid transparent;
}
}
.block-frame-default-header {
display: flex;
height: 34px;
padding: 4px 0 4px 10px;
align-items: center;
gap: 8px;
align-self: stretch;
font: var(--header-font);
background-color: #262626;
border-radius: 8px 8px 0 0;
.block-frame-default-header-iconview {
display: flex;
align-items: center;
gap: 8px;
color: var(--main-text-color);
.block-frame-preicon-button {
opacity: 0.7;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.block-frame-view-icon {
font-size: var(--header-icon-size);
opacity: 0.5;
width: var(--header-icon-width);
i {
margin-right: 0;
}
}
.block-frame-view-type {
line-height: 12px;
font-weight: 700;
}
.block-frame-blockid {
opacity: 0.5;
}
}
.block-frame-text {
font: var(--fixed-font);
font-size: 11px;
opacity: 0.7;
}
.block-frame-end-icons {
display: flex;
align-items: center;
.block-frame-endicon-button {
opacity: 0.7;
cursor: pointer;
padding: 4px 6px;
&:hover {
opacity: 1;
}
}
.block-frame-settings {
display: flex;
width: 24px;
padding: 6px;
justify-content: center;
align-items: center;
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.block-frame-default-close {
display: flex;
justify-content: center;
align-items: center;
opacity: 0.5;
font-size: 11px;
width: 24px;
padding: 4px 6px;
cursor: pointer;
&:hover {
opacity: 1;
}
.block-mask {
border: 2px solid rgba(255, 255, 255, 0.1);
}
}
}
}
.block-frame-preview {
background-color: var(--main-bg-color);
width: 100%;
flex-grow: 1;
}
}

35
frontend/app/block/block.tsx
View File

@ -293,24 +293,27 @@ const BlockFrame_Default_Component = ({
ref={blockModel?.blockRef}
style={style}
>
<div
className="block-frame-default-header"
ref={layoutModel?.dragHandleRef}
onContextMenu={(e) => handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onClose)}
>
<div className="block-frame-default-header-iconview">
{preIconButtonElem}
<div className="block-frame-view-icon">{getBlockHeaderIcon(viewIcon, blockData)}</div>
<div className="block-frame-view-type">{blockViewToName(blockData?.view)}</div>
{settingsConfig?.blockheader?.showblockids && (
<div className="block-frame-blockid">[{blockId.substring(0, 8)}]</div>
)}
<div className="block-mask"></div>
<div className="block-frame-default-inner">
<div
className="block-frame-default-header"
ref={layoutModel?.dragHandleRef}
onContextMenu={(e) => handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onClose)}
>
<div className="block-frame-default-header-iconview">
{preIconButtonElem}
<div className="block-frame-view-icon">{getBlockHeaderIcon(viewIcon, blockData)}</div>
<div className="block-frame-view-type">{blockViewToName(blockData?.view)}</div>
{settingsConfig?.blockheader?.showblockids && (
<div className="block-frame-blockid">[{blockId.substring(0, 8)}]</div>
)}
</div>
{util.isBlank(viewText) ? null : <div className="block-frame-text">{viewText}</div>}
<div className="flex-spacer"></div>
<div className="block-frame-end-icons">{endIconsElem}</div>
</div>
{util.isBlank(viewText) ? null : <div className="block-frame-text">{viewText}</div>}
<div className="flex-spacer"></div>
<div className="block-frame-end-icons">{endIconsElem}</div>
{preview ? <div className="block-frame-preview" /> : children}
</div>
{preview ? <div className="block-frame-preview" /> : children}
</div>
);
};

2
frontend/app/tab/tab.less
View File

@ -5,7 +5,7 @@
position: absolute;
width: 130px;
height: 100%;
padding: 6px 3px;
padding: 6px 3px 0px;
box-sizing: border-box;
font-weight: bold;
color: var(--secondary-text-color);

2
frontend/app/tab/tabbar.less
View File

@ -10,7 +10,7 @@
.tab-bar {
position: relative; // Needed for absolute positioning of child tabs
margin-left: 100px;
height: 40px;
height: 33px;
// 36 is the width of add tab button
// 100 is offset from the left, for macOS window controls and dragging
// 50 right offset for dragging

5
frontend/app/theme.less
View File

@ -19,10 +19,11 @@
--warning-color: rgb(224, 185, 86);
--success-color: rgb(78, 154, 6);
--hover-bg-color: rgba(255, 255, 255, 0.1);
--block-bg-color: rgba(255, 255, 255, 0.05);
/* scrollbar colors */
--scrollbar-background-color: var(--main-bg-color);
--scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
--scrollbar-background-color: transparent;
--scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
--scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
--scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);

2
frontend/app/view/preview.tsx
View File

@ -399,7 +399,7 @@ function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel
}, 10);
return (
<div ref={ref} className="full-preview">
<div ref={ref} className="full-preview scrollbar-hide-until-hover">
<DirNav cwdAtom={fileNameAtom} />
{specializedView}
</div>

24
frontend/app/view/term/term.less
View File

@ -107,4 +107,28 @@
}
}
}
.terminal {
*::-webkit-scrollbar {
width: 4px;
height: 4px;
}
*::-webkit-scrollbar-track {
background-color: var(--scrollbar-background-color);
}
*::-webkit-scrollbar-thumb {
display: none;
background-color: var(--scrollbar-thumb-color);
border-radius: 4px;
margin: 0 1px 0 1px;
}
&:hover {
*::-webkit-scrollbar-thumb {
display: block;
}
}
}
}