From 311fcb18133d1343f6a9ae5bd7a25795a1d12c49 Mon Sep 17 00:00:00 2001 From: undergroundwires Date: Tue, 6 Feb 2024 12:35:51 +0100 Subject: [PATCH] Improve UI code styling for all platforms This commit standardizes the visual styling of inline code and code blocks, ensuring consistency across macOS, Android, Linux and Windows platforms. The discrepancies observed in font rendering on macOS, which caused the inline code font to appear larger, have been addressed. This behavior was only observed on macOS using different browsers such as Firefox, Safari, Chromium-based browsers including Electron. Key changes: - Standardize font size relative to the parent element. - Remove font-weight for uniformity, especially when the specific weight is not included with the application. - Add a consistent background color to inline codes, aligning their look with code blocks. - Refactor code styling into a separate SCSS file for improved modularity and maintainability. - Update the documentation to reflect these visual design choices for privacy.sexy's UI. These changes enhance the overall user experience by providing a consistent look and feel for code elements within the UI, regardless of the user's platform or browser. --- docs/presentation.md | 7 ++- src/presentation/assets/styles/_fonts.scss | 2 + .../NodeContent/Markdown/_code-styling.scss | 45 +++++++++++++++++++ .../NodeContent/Markdown/markdown-styles.scss | 39 +++------------- 4 files changed, 59 insertions(+), 34 deletions(-) create mode 100644 src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss diff --git a/docs/presentation.md b/docs/presentation.md index 85180c75..b85f44ad 100644 --- a/docs/presentation.md +++ b/docs/presentation.md @@ -32,7 +32,12 @@ The presentation layer uses an event-driven architecture for bidirectional react ## Visual design best-practices -Add visual clues for clickable items. It should be as clear as possible that they're interactable at first look without hovering. They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility. +- **Clickables**: + Add visual clues for clickable items. + It should be as clear as possible that they're interactable at first look without hovering. + They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility. +- **Borders**: + privacy.sexy prefers sharper edges in its design language. ## Application data diff --git a/src/presentation/assets/styles/_fonts.scss b/src/presentation/assets/styles/_fonts.scss index 27a4f2bf..0667056e 100644 --- a/src/presentation/assets/styles/_fonts.scss +++ b/src/presentation/assets/styles/_fonts.scss @@ -40,3 +40,5 @@ $font-size-normal : 18px; $font-size-large : 22px; $font-size-larger : 26px; $font-size-largest : 40px; + +$font-size-relative-smaller: 85%; diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss new file mode 100644 index 00000000..8de02a69 --- /dev/null +++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss @@ -0,0 +1,45 @@ +@use "@/presentation/assets/styles/main" as *; + +@mixin code-block() { + pre { + @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has + } +} + +@mixin inline-code() { + :not(pre)>code { + @content; + } +} + +@mixin base-code() { + code { + @content; + } +} + +@mixin style-code-elements( + $color-background, + $code-block-padding, +) { + $border-radius: 2px; // Subtle rounding still maintaining sharp design. + + @include base-code { + font-family: $font-normal; + border-radius: $border-radius; + font-size: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around. + } + + @include inline-code { + background: $color-background; + word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow. + padding: 0.2em 0.4em; // Balanced padding for readability, with `em` units scaling with font size. + } + + @include code-block { + background: $color-background; + border-radius: $border-radius; + overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown) + padding: $code-block-padding; + } +} diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss index 48aed9af..e3bb7e0a 100644 --- a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss +++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss @@ -1,24 +1,7 @@ @use "@/presentation/assets/styles/main" as *; +@use "_code-styling" as *; @use 'sass:math'; -@mixin code-block() { - pre { - @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has - } -} - -@mixin inline-code() { - :not(pre) > code { - @content; - } -} - -@mixin code() { - code { - @content; - } -} - @mixin no-margin($selectors) { #{$selectors} { margin: 0; @@ -110,21 +93,6 @@ } } - @include code { - font-family: $font-normal; - font-weight: 600; - } - - @include inline-code { - word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow. - } - - @include code-block { - padding: $base-spacing; - background: $color-primary-darker; - overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown) - } - @include apply-uniform-vertical-spacing($base-spacing); @include apply-uniform-horizontal-spacing($base-spacing); @@ -140,4 +108,9 @@ padding: 0 $base-spacing; border-left: .25em solid $color-primary; } + + @include style-code-elements( + $code-block-padding: $base-spacing, + $color-background: $color-primary-darker, + ); }