mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-02 18:39:05 +01:00
Simplify blockframe header styling (#199)
This cleans up styling for the BlockFrame header, which had a lot of redundant and unnecessary declarations, which produced inconsistent styling.
This commit is contained in:
Evan Simkowitz
GitHub
parent
c23b2aab2a
commit
5143aefd3c
@ -71,7 +71,6 @@
|
||||
|
||||
.block-frame-default-header {
|
||||
display: flex;
|
||||
height: 34px;
|
||||
padding: 4px 5px 4px 10px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@ -93,10 +92,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--main-text-color);
|
||||
flex: 0 1 auto;
|
||||
overflow-x: hidden;
|
||||
min-width: 0;
|
||||
|
||||
.block-frame-view-icon {
|
||||
font-size: var(--header-icon-size);
|
||||
@ -110,6 +105,9 @@
|
||||
.block-frame-view-type {
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
text-wrap: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.block-frame-blockid {
|
||||
@ -121,34 +119,36 @@
|
||||
font: var(--fixed-font);
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
text-wrap: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.iconbutton {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-frame-textelems-wrapper {
|
||||
display: flex;
|
||||
flex: 1 100 auto;
|
||||
overflow-x: hidden;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
|
||||
.block-frame-header-iconbutton {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-frame-div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -180,7 +180,7 @@
|
||||
}
|
||||
|
||||
// webview specific. for refresh button
|
||||
.block-frame-header-iconbutton {
|
||||
.iconbutton {
|
||||
height: 100%;
|
||||
width: 27px;
|
||||
display: flex;
|
||||
@ -200,45 +200,12 @@
|
||||
|
||||
.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 {
|
||||
.iconbutton {
|
||||
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;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,9 +86,7 @@ const OptMagnifyButton = React.memo(
|
||||
title: "Minimize",
|
||||
click: layoutModel?.onMagnifyToggle,
|
||||
};
|
||||
return (
|
||||
<IconButton key="magnify" decl={magnifyDecl} className="block-frame-endicon-button block-frame-magnify" />
|
||||
);
|
||||
return <IconButton key="magnify" decl={magnifyDecl} className="block-frame-magnify" />;
|
||||
}
|
||||
);
|
||||
|
||||
@ -97,11 +95,7 @@ function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: La
|
||||
const endIconButtons = util.useAtomValueSafe(viewModel.endIconButtons);
|
||||
|
||||
if (endIconButtons && endIconButtons.length > 0) {
|
||||
endIconsElem.push(
|
||||
...endIconButtons.map((button, idx) => (
|
||||
<IconButton key={idx} decl={button} className="block-frame-endicon-button" />
|
||||
))
|
||||
);
|
||||
endIconsElem.push(...endIconButtons.map((button, idx) => <IconButton key={idx} decl={button} />));
|
||||
}
|
||||
const settingsDecl: HeaderIconButton = {
|
||||
elemtype: "iconbutton",
|
||||
@ -110,9 +104,7 @@ function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: La
|
||||
click: (e) =>
|
||||
handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onMagnifyToggle, layoutModel?.onClose),
|
||||
};
|
||||
endIconsElem.push(
|
||||
<IconButton key="settings" decl={settingsDecl} className="block-frame-endicon-button block-frame-settings" />
|
||||
);
|
||||
endIconsElem.push(<IconButton key="settings" decl={settingsDecl} className="block-frame-settings" />);
|
||||
endIconsElem.push(<OptMagnifyButton key="unmagnify" blockData={blockData} layoutModel={layoutModel} />);
|
||||
const closeDecl: HeaderIconButton = {
|
||||
elemtype: "iconbutton",
|
||||
@ -120,9 +112,7 @@ function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: La
|
||||
title: "Close",
|
||||
click: layoutModel?.onClose,
|
||||
};
|
||||
endIconsElem.push(
|
||||
<IconButton key="close" decl={closeDecl} className="block-frame-endicon-button block-frame-default-close" />
|
||||
);
|
||||
endIconsElem.push(<IconButton key="close" decl={closeDecl} className="block-frame-default-close" />);
|
||||
return endIconsElem;
|
||||
}
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@ export const IconButton = React.memo(({ decl, className }: { decl: HeaderIconBut
|
||||
const buttonRef = React.useRef<HTMLDivElement>(null);
|
||||
useLongClick(buttonRef, decl.click, decl.longClick);
|
||||
return (
|
||||
<div ref={buttonRef} className={clsx(className)} title={decl.title}>
|
||||
<div ref={buttonRef} className={clsx("iconbutton", className)} title={decl.title}>
|
||||
<i className={util.makeIconClass(decl.icon, true)} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user