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

Add tab deep color param & mouse mod change handel #12

Merged
MrKBear merged 3 commits from dev-mrkbear into master 2022-03-03 17:28:24 +08:00
Conversation 0 Commits 3 Files Changed 7 +50 -16
3 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit df48d3a9e3 - Show all commits

31
source/Component/Container/Container.scss
View File

@ -144,6 +144,13 @@ div.dark.app-container.end-containe {
color: rgba($color: #FFFFFF, $alpha: .85); 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.app-tab-header-item.active {
div.border-view::after { div.border-view::after {
background-color: $lt-bg-color-lvl4-dark; background-color: $lt-bg-color-lvl4-dark;
@ -151,6 +158,14 @@ div.dark.app-container.end-containe {
} }
} }
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 { div.app-panel::-webkit-scrollbar-thumb {
background-color: $lt-bg-color-lvl1-dark; background-color: $lt-bg-color-lvl1-dark;
} }
@ -163,9 +178,17 @@ div.light.app-container.end-containe {
div.app-tab-header-item.active, div.app-tab-header-item.active,
div.app-tab-header-item:hover { div.app-tab-header-item:hover {
transition: none; transition: none;
background-color: $lt-bg-color-lvl4-light;
color: rgba($color: #000000, $alpha: .85); 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.app-tab-header-item.active {
div.border-view::after { div.border-view::after {
background-color: $lt-bg-color-lvl4-light; background-color: $lt-bg-color-lvl4-light;
@ -173,6 +196,14 @@ div.light.app-container.end-containe {
} }
} }
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 { div.app-panel::-webkit-scrollbar-thumb {
background-color: $lt-bg-color-lvl1-light; background-color: $lt-bg-color-lvl1-light;
} }

11
source/Component/Container/Container.tsx
View File

@ -59,6 +59,7 @@ class Container extends Component<IContainerProps> {
if (panelId === this.props.focusId) classList.push("active"); if (panelId === this.props.focusId) classList.push("active");
if (panelId === showPanelId) classList.push("tab"); if (panelId === showPanelId) classList.push("tab");
const panelInfo = getPanelInfoById(panelId as any); const panelInfo = getPanelInfoById(panelId as any);
if (panelInfo?.isDeepDark) classList.push("deep");
return <LocalizationTooltipHost return <LocalizationTooltipHost
i18nKey={panelInfo ? panelInfo.introKay as any : "Panel.Info.Notfound"} 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) { if (this.props.onScaleChange && this.focusEdgeId !== undefined) {
e.preventDefault(); e.preventDefault();
let mouveDist: number = 0; let moveDist: number = 0;
let rootSize: number = 0; let rootSize: number = 0;
let edgeSize: number = 0; let edgeSize: number = 0;
let newSize: number = 0; let newSize: number = 0;
if (this.edgeInfo.direction === LayoutDirection.X) { if (this.edgeInfo.direction === LayoutDirection.X) {
mouveDist = e.clientX - this.edgeInfo.mouseX; moveDist = e.clientX - this.edgeInfo.mouseX;
rootSize = this.edgeInfo.rootWidth; rootSize = this.edgeInfo.rootWidth;
edgeSize = this.edgeInfo.edgeWidth; edgeSize = this.edgeInfo.edgeWidth;
newSize = edgeSize + mouveDist; newSize = edgeSize + moveDist;
} }
if (this.edgeInfo.direction === LayoutDirection.Y) { if (this.edgeInfo.direction === LayoutDirection.Y) {
mouveDist = e.clientY - this.edgeInfo.mouseY; moveDist = e.clientY - this.edgeInfo.mouseY;
rootSize = this.edgeInfo.rootHeight; rootSize = this.edgeInfo.rootHeight;
edgeSize = this.edgeInfo.edgeHeight edgeSize = this.edgeInfo.edgeHeight
newSize = edgeSize + mouveDist; newSize = edgeSize + moveDist;
} }
if (newSize < 38) { newSize = 38; } if (newSize < 38) { newSize = 38; }

4
source/Panel/Panel.tsx
View File

@ -9,6 +9,7 @@ interface IPanelInfo {
class: (new (...p: any) => Component) | FunctionComponent; class: (new (...p: any) => Component) | FunctionComponent;
hidePadding?: boolean; hidePadding?: boolean;
hideScrollBar?: boolean; hideScrollBar?: boolean;
isDeepDark?: boolean;
option?: Record<string, string>; option?: Record<string, string>;
} }
@ -18,7 +19,8 @@ type PanelId = ""
const PanelInfoMap = new Map<PanelId, IPanelInfo>(); const PanelInfoMap = new Map<PanelId, IPanelInfo>();
PanelInfoMap.set("RenderView", { PanelInfoMap.set("RenderView", {
nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View", class: RenderView, hidePadding: true, hideScrollBar: true nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View",
class: RenderView, hidePadding: true, hideScrollBar: true, isDeepDark: true
}); });
function getPanelById(panelId: PanelId): ReactNode { function getPanelById(panelId: PanelId): ReactNode {