From 93d46cca806af4bc01441f9433b50d6973bd97d3 Mon Sep 17 00:00:00 2001 From: Mike Sawka Date: Mon, 4 Mar 2024 23:33:54 -0800 Subject: [PATCH] app border fixup (no transparency), terminal background image POC (#378) * use native border (remove transparency from app window), remove css borders, remove default --term variables, force setClientData to set --term font variables on first set. * terminal background images --- public/themes/default.css | 8 +++--- public/themes/term-dark.css | 2 +- src/app/app.less | 26 +++----------------- src/app/common/elements/mainview.less | 8 ------ src/app/sidebar/sidebar.less | 2 -- src/app/workspace/cmdinput/textareainput.tsx | 2 +- src/app/workspace/workspace.less | 14 +++++++++++ src/electron/emain.ts | 1 - src/models/model.ts | 3 ++- 9 files changed, 27 insertions(+), 39 deletions(-) diff --git a/public/themes/default.css b/public/themes/default.css index 213a7ce88..1226ddba5 100644 --- a/public/themes/default.css +++ b/public/themes/default.css @@ -7,12 +7,14 @@ --fa-style-family: "Font Awesome 6 Sharp"; /* these variables are overridden by user settings */ + /* --termfontfamily: "Hack"; --termfontsize: 13px; - --termlineheight: 18px; - --termpad: 9px; /* padding value (scaled to termfontsize) */ + --termlineheight: 15px; + --termpad: 7px; --termfontsize-sm: 11px; - --termlineheight-sm: 15px; + --termlineheight-sm: 13px; + */ /* base fonts */ --base-font: normal 15px "Lato", sans-serif; diff --git a/public/themes/term-dark.css b/public/themes/term-dark.css index 3479ca996..164332b43 100644 --- a/public/themes/term-dark.css +++ b/public/themes/term-dark.css @@ -23,5 +23,5 @@ --term-gray: #8b918a; --term-cmdtext: #f0f0f0; --term-foreground: #c1c1c1; - --term-background: #000000; + --term-background: #00000000; } diff --git a/src/app/app.less b/src/app/app.less index fdc18a3ce..1d2a642ea 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -28,6 +28,10 @@ body textarea.textarea { color: var(--app-text-color); background-color: var(--input-bg-color); + &:focus { + box-shadow: none; + } + &::placeholder { color: var(--input-placeholder-color); } @@ -47,27 +51,6 @@ body input.input { // platform overrides .platform-darwin { - border-radius: var(--app-border-radius-darwin); - - .main-content { - border-radius: var(--app-border-radius-darwin); - } - - .main-content > :first-child { - border-top-left-radius: var(--app-border-radius-darwin); - border-bottom-left-radius: var(--app-border-radius-darwin); - } - - .main-content > .collapsed:first-child + div { - border-top-left-radius: var(--app-border-radius-darwin); - border-bottom-left-radius: var(--app-border-radius-darwin); - } - - .main-content > :last-child { - border-top-right-radius: var(--app-border-radius-darwin); - border-bottom-right-radius: var(--app-border-radius-darwin); - } - .logo-button-container { width: var(--floating-logo-width-darwin); } @@ -279,7 +262,6 @@ a.a-block { display: flex; flex-direction: column; background-color: var(--app-maincontent-bg-color); - border-top: 1px solid var(--app-border-color); .main-content { display: flex; diff --git a/src/app/common/elements/mainview.less b/src/app/common/elements/mainview.less index 56d3a3f19..928a17efb 100644 --- a/src/app/common/elements/mainview.less +++ b/src/app/common/elements/mainview.less @@ -3,9 +3,6 @@ display: flex; flex-direction: column; position: relative; - border-bottom: 1px solid var(--app-border-color); - border-right: 1px solid var(--app-border-color); - border-left: 1px solid var(--app-border-color); background-color: var(--app-bg-color); &.is-hidden { @@ -36,11 +33,6 @@ font-size: var(--title-font-size); } } - - .bottom-border { - border-bottom: 1px solid var(--app-border-color); - margin-bottom: 10px; - } } // This ensures the tab bar does not collide with the floating logo. The floating logo sits above the sidebar when it is not collapsed, so no additional margin is needed in that case. diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less index 719486bfd..7695dfa1a 100644 --- a/src/app/sidebar/sidebar.less +++ b/src/app/sidebar/sidebar.less @@ -8,8 +8,6 @@ line-height: 20px; backdrop-filter: blur(4px); z-index: 20; - border-left: 1px solid var(--app-border-color); - border-bottom: 1px solid var(--app-border-color); font-size: var(--sidebar-font-size); font-family: var(--base-font-family); font-weight: var(--sidebar-font-weight); diff --git a/src/app/workspace/cmdinput/textareainput.tsx b/src/app/workspace/cmdinput/textareainput.tsx index fbcb97038..c99dbc896 100644 --- a/src/app/workspace/cmdinput/textareainput.tsx +++ b/src/app/workspace/cmdinput/textareainput.tsx @@ -581,7 +581,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: () } let termFontSize = GlobalModel.getTermFontSize(); let fontSize = getMonoFontSize(termFontSize); - let termPad = Math.floor(fontSize.height / 2); + let termPad = fontSize.pad; let computedInnerHeight = displayLines * fontSize.height + 2 * termPad; let computedOuterHeight = computedInnerHeight + 2 * termPad; let shellType: string = ""; diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less index f0eae8c22..c96d83697 100644 --- a/src/app/workspace/workspace.less +++ b/src/app/workspace/workspace.less @@ -1,5 +1,19 @@ .session-view { overflow: hidden; + position: relative; + + &:before { + content: " "; + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: var(--tab-bg-image-opacity, 0.5); + background-image: var(--tab-bg-image-url, none); + background-size: cover; + } .center-message { display: flex; diff --git a/src/electron/emain.ts b/src/electron/emain.ts index fe1d7898b..c4f199212 100644 --- a/src/electron/emain.ts +++ b/src/electron/emain.ts @@ -322,7 +322,6 @@ function createMainWindow(clientData: ClientDataType | null): Electron.BrowserWi height: bounds.height, minWidth: 800, minHeight: 600, - transparent: true, icon: unamePlatform == "linux" ? "public/logos/wave-logo-dark.png" : undefined, webPreferences: { preload: path.join(getElectronAppBasePath(), DistDir, "preload.js"), diff --git a/src/models/model.ts b/src/models/model.ts index e86eb3b0a..3e26a3dbc 100644 --- a/src/models/model.ts +++ b/src/models/model.ts @@ -1181,6 +1181,7 @@ class Model { } setClientData(clientData: ClientDataType) { + let curClientDataIsNull = this.clientData.get() == null; let newFontFamily = clientData?.feopts?.termfontfamily; if (newFontFamily == null) { newFontFamily = appconst.DefaultTermFontFamily; @@ -1189,7 +1190,7 @@ class Model { if (newFontSize == null) { newFontSize = appconst.DefaultTermFontSize; } - const ffUpdated = newFontFamily != this.getTermFontFamily(); + const ffUpdated = curClientDataIsNull || newFontFamily != this.getTermFontFamily(); const fsUpdated = newFontSize != this.getTermFontSize(); let newTheme = clientData?.feopts?.theme;