44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix tree view alignment and padding issues

Browse Source 
This commit addresses issues with the tree view not fully utilizing the
available width (appearing squeezed on the left) on bigger screens, and
inconsistent padding during searches.

The changes centralize padding and script tree rendering logic to
enforce consistency and prevent regression.

Changes:

- Fix tree view width utilization.
- Refactor SCSS variables for better IDE support.
- Unify padding and tree background color logic for consistent padding
  and coloring around the tree component.
- Fix no padding around the tree in tree view.
- Centralize color SCSS variable for script background for consistent
  application theming.
This commit is contained in:
undergroundwires
2023-12-12 03:44:02 +01:00
parent a9851272ae
commit 15134ea04b
8 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/presentation/assets/styles/_colors.scss
View File

@@ -1,7 +1,10 @@
/*
Colors used throughout the application
Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
Inspired by the material color system (https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color).
Colors are named according to the Vue Design System guidelines (https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors):
- Default: The default base color is `color-{name}`.
- Darker than default: Shades are named as `color-{name}-dark`, `color-{name}-darker`, or `color-{name}-darkest`.
- Lighter than default: Tints are named as `color-{name}-light`, `color-{name}-lighter`, or `color-{name}-lightest`.
*/
// --- Primary | The color displayed most frequently across screens and components
@@ -26,3 +29,12 @@ $color-on-surface : #4d5156;
// Background | Appears behind scrollable content.
$color-background : #e6ecf4;
/*
Application-specific colors:
These are tailored to the specific needs of the application and derived from the above theme colors.
Use these colors to ensure consistent styling across components. When adding new colors, reference existing theme colors.
This approach maintains a cohesive look and feel and simplifies theme adjustments.
*/
$color-scripts-bg: $color-primary-darker;

2
src/presentation/assets/styles/_mixins.scss
View File

@@ -64,4 +64,4 @@
margin: 0;
padding: 0;
list-style: none;
}
}

21
src/presentation/components/Scripts/View/Cards/CardListItem.vue
View File

@@ -37,7 +37,10 @@
/>
</div>
<div class="card__expander__content">
<ScriptsTree :category-id="categoryId" />
<ScriptsTree
:category-id="categoryId"
:has-top-padding="false"
/>
</div>
</div>
</div>
@@ -159,27 +162,26 @@ $card-horizontal-gap : $card-gap;
&:after {
transition: all 0.3s ease-in-out;
}
&__title {
.card__inner__title {
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
}
&__selection_indicator {
.card__inner__selection_indicator {
height: $card-inner-padding;
margin-right: -$card-inner-padding;
padding-right: 10px;
display: flex;
justify-content: flex-end;
}
&__expand-icon {
.card__inner__expand-icon {
width: 100%;
margin-top: .25em;
vertical-align: middle;
}
}
&__expander {
.card__expander {
transition: all 0.2s ease-in-out;
position: relative;
background-color: $color-primary-darker;
@@ -189,17 +191,14 @@ $card-horizontal-gap : $card-gap;
align-items: center;
flex-direction: column;
&__content {
.card__expander__content {
display: flex;
justify-content: center;
word-break: break-word;
margin-bottom: 1em;
margin-left: 0.5em;
margin-right: 0.5em;
max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
}
&__close-button {
.card__expander__close-button {
font-size: 1.5em;
align-self: flex-end;
margin-right: 0.25em;

25
src/presentation/components/Scripts/View/TheScriptsView.vue
View File

@@ -5,9 +5,7 @@
<CardList />
</template>
<template v-else-if="currentView === ViewType.Tree">
<div class="tree">
<ScriptsTree />
</div>
<ScriptsTree />
</template>
</template>
<template v-else>
@@ -30,8 +28,8 @@
</div>
</div>
</div>
<div v-if="searchHasMatches" class="tree tree--searching">
<ScriptsTree />
<div v-if="searchHasMatches">
<ScriptsTree :has-top-padding="false" />
</div>
</template>
</div>
@@ -139,29 +137,20 @@ $margin-inner: 4px;
overflow: auto;
max-height: 70vh;
}
.tree {
padding-left: 3%;
padding-top: 15px;
padding-bottom: 15px;
&--searching {
background-color: $color-primary-darker;
padding-top: 0px;
}
}
}
.search {
display: flex;
flex-direction: column;
background-color: $color-primary-darker;
&__query {
background-color: $color-scripts-bg;
.search__query {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
margin-top: 1em;
color: $color-primary;
&__close-button {
.search__query__close-button {
@include clickable;
font-size: 1.25em;
margin-left: 0.25rem;
@@ -170,7 +159,7 @@ $margin-inner: 4px;
}
}
}
&-no-matches {
.search-no-matches {
display:flex;
flex-direction: column;
word-break:break-word;

2
src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
View File

@@ -167,7 +167,7 @@ $base-spacing: $text-size;
@include no-margin('blockquote');
@include no-margin('pre');
/* Add spacing between elements using `margin-bottom` only (bottom-out instead of top-down strategy). */
/* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
$small-vertical-spacing: math.div($base-vertical-spacing, 2);
@include bottom-margin('p', $base-vertical-spacing);
@include bottom-margin('h1, h2, h3, h4, h5, h6', $base-vertical-spacing);

26
src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
View File

@@ -1,5 +1,10 @@
<template>
<div class="scripts-tree-container">
<div
class="scripts-tree-container"
:class="{
'top-padding': hasTopPadding,
}"
>
<template v-if="initialNodes.length">
<TreeView
:initial-nodes="initialNodes"
@@ -39,6 +44,10 @@ export default defineComponent({
type: [Number],
default: undefined,
},
hasTopPadding: {
type: Boolean,
default: true,
},
},
setup(props) {
const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
@@ -62,8 +71,21 @@ export default defineComponent({
</script>
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
$padding: 20px;
.scripts-tree-container {
display: flex; // We could provide `block`, but `flex` is more versatile.
overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
/* Set background color in consistent way so it has similar look when searching, on tree view, in cards etc. */
background: $color-scripts-bg;
padding-bottom: $padding;
padding-left: $padding;
padding-right: $padding;
&.top-padding {
padding-top: $padding;
}
}
</style>

1
src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
View File

@@ -98,5 +98,6 @@ export default defineComponent({
.tree {
background: $color-tree-bg;
overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text.
}
</style>

2
src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss
View File

@@ -1,7 +1,7 @@
@use "@/presentation/assets/styles/main" as *;
/* Tree colors, based on global colors */
$color-tree-bg : $color-primary-darker;
$color-tree-bg : $color-scripts-bg;
$color-node-arrow : $color-on-primary;
$color-node-fg : $color-on-primary;
$color-node-highlight-bg : $color-primary-dark;