MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add tab deep color param

Browse Source
This commit is contained in:
MrKBear
2022-03-03 17:25:50 +08:00
parent 76e292a0d3
commit df48d3a9e3
3 changed files with 50 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/Component/Container/Container.scss
+41 -10
View File
@@ -143,13 +143,28 @@ div.dark.app-container.end-containe {
background-color: $lt-bg-color-lvl4-dark;
color: rgba($color: #FFFFFF, $alpha: .85);
}
div.app-tab-header-item.deep.tab,
div.app-tab-header-item.deep.active,
div.app-tab-header-item.deep:hover {
background-color: $lt-bg-color-lvl5-dark;
}
div.app-tab-header-item.tab,
div.app-tab-header-item.active {
div.border-view::after {
background-color: $lt-bg-color-lvl4-dark;
transition: none;
}
}
div.border-view::after {
background-color: $lt-bg-color-lvl4-dark;
transition: none;
}
}
div.app-tab-header-item.deep.tab,
div.app-tab-header-item.deep.active {
div.border-view::after {
background-color: $lt-bg-color-lvl5-dark;
transition: none;
}
}
div.app-panel::-webkit-scrollbar-thumb {
background-color: $lt-bg-color-lvl1-dark;
@@ -163,15 +178,31 @@ div.light.app-container.end-containe {
div.app-tab-header-item.active,
div.app-tab-header-item:hover {
transition: none;
background-color: $lt-bg-color-lvl4-light;
color: rgba($color: #000000, $alpha: .85);
}
div.app-tab-header-item.deep.tab,
div.app-tab-header-item.deep.active,
div.app-tab-header-item.deep:hover {
background-color: $lt-bg-color-lvl5-light;
}
div.app-tab-header-item.tab,
div.app-tab-header-item.active {
div.border-view::after {
background-color: $lt-bg-color-lvl4-light;
transition: none;
}
}
div.border-view::after {
background-color: $lt-bg-color-lvl4-light;
transition: none;
}
}
div.app-tab-header-item.deep.tab,
div.app-tab-header-item.deep.active {
div.border-view::after {
background-color: $lt-bg-color-lvl5-light;
transition: none;
}
}
div.app-panel::-webkit-scrollbar-thumb {
background-color: $lt-bg-color-lvl1-light;
source/Component/Container/Container.tsx
+6 -5
View File
@@ -59,6 +59,7 @@ class Container extends Component<IContainerProps> {
if (panelId === this.props.focusId) classList.push("active");
if (panelId === showPanelId) classList.push("tab");
const panelInfo = getPanelInfoById(panelId as any);
if (panelInfo?.isDeepDark) classList.push("deep");
return <LocalizationTooltipHost
i18nKey={panelInfo ? panelInfo.introKay as any : "Panel.Info.Notfound"}
@@ -110,23 +111,23 @@ class Container extends Component<IContainerProps> {
if (this.props.onScaleChange && this.focusEdgeId !== undefined) {
e.preventDefault();
let mouveDist: number = 0;
let moveDist: number = 0;
let rootSize: number = 0;
let edgeSize: number = 0;
let newSize: number = 0;
if (this.edgeInfo.direction === LayoutDirection.X) {
mouveDist = e.clientX - this.edgeInfo.mouseX;
moveDist = e.clientX - this.edgeInfo.mouseX;
rootSize = this.edgeInfo.rootWidth;
edgeSize = this.edgeInfo.edgeWidth;
newSize = edgeSize + mouveDist;
newSize = edgeSize + moveDist;
}
if (this.edgeInfo.direction === LayoutDirection.Y) {
mouveDist = e.clientY - this.edgeInfo.mouseY;
moveDist = e.clientY - this.edgeInfo.mouseY;
rootSize = this.edgeInfo.rootHeight;
edgeSize = this.edgeInfo.edgeHeight
newSize = edgeSize + mouveDist;
newSize = edgeSize + moveDist;
}
if (newSize < 38) { newSize = 38; }