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 213a7ce8..1226ddba 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 3479ca99..164332b4 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 fdc18a3c..1d2a642e 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 56d3a3f1..928a17ef 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 719486bf..7695dfa1 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 fbcb9703..c99dbc89 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 f0eae8c2..c96d8369 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 fe1d7898..c4f19921 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 e86eb3b0..3e26a3db 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;