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

51
source/Component/Container/Container.scss
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;

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 === 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; }

4
source/Panel/Panel.tsx
View File

@ -9,6 +9,7 @@ interface IPanelInfo {
class: (new (...p: any) => Component) | FunctionComponent;
hidePadding?: boolean;
hideScrollBar?: boolean;
isDeepDark?: boolean;
option?: Record<string, string>;
}
@ -18,7 +19,8 @@ type PanelId = ""
const PanelInfoMap = new Map<PanelId, IPanelInfo>();
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 {