commit: 28c7fac9f0b740473575200051bc2983ec5c9be9
parent 3f6b9fbf9cc59d5ae20f9bda7c8fdf9f55d5675e
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 17:49:56 +0200
implement list item styles
Diffstat:
10 files changed, 103 insertions(+), 64 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -384,7 +384,8 @@ nav {
}
}
-.menu-item {
+.menu-item,
+.list-item {
display: block;
box-sizing: border-box;
border: none;
@@ -397,9 +398,11 @@ nav {
color: inherit;
clear: both;
position: relative;
- border-bottom: 1px solid;
white-space: nowrap;
border-color: var(--border);
+ border-style: solid;
+ border-width: 0;
+ border-top-width: 1px;
width: 100%;
line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap);
@@ -408,8 +411,28 @@ nav {
--__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em;
+ &.-active,
+ &:hover {
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+ }
+
+ &.-active + &,
+ &:hover + & {
+ border-top-width: 0;
+ }
+
+ &:hover + .menu-item-collapsible:not(.-expanded) + &,
+ &.-active + .menu-item-collapsible:not(.-expanded) + & {
+ border-top-width: 0;
+ }
+
+ &[aria-expanded="true"] {
+ border-bottom-width: 1px;
+ }
+
a,
- button {
+ button:not(.button-default) {
text-align: initial;
padding: 0;
background: none;
@@ -425,12 +448,13 @@ nav {
&:first-child {
border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness);
+ border-top-width: 0;
}
&:last-child {
border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness);
- border: none;
+ border-bottom-width: 0;
}
}
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
@@ -47,7 +47,6 @@
display: flex;
flex: 1 0;
margin: 0;
- padding: 0.6em 1em;
--emoji-size: 14px;
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
@@ -1,8 +1,6 @@
.chat-list-item {
display: flex;
flex-direction: row;
- padding: 0.75em;
- height: 5em;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
@@ -12,7 +10,6 @@
}
&:hover {
- background-color: var(--selectedPost, $fallback--lightBg);
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
}
@@ -29,7 +26,7 @@
.heading {
width: 100%;
- display: inline-flex;
+ display: flex;
justify-content: space-between;
line-height: 1em;
}
@@ -47,18 +44,17 @@
}
.chat-preview {
- display: inline-flex;
+ display: flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0.35em 0;
- color: $fallback--text;
- color: var(--faint, $fallback--text);
+ color: var(--faintText);
width: 100%;
}
a {
- color: var(--faintLink, $fallback--link);
+ color: var(--faintLink);
text-decoration: none;
pointer-events: none;
}
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
@@ -7,6 +7,7 @@
v-for="item in items"
:key="getKey(item)"
class="list-item"
+ :class="getClass(item)"
role="listitem"
>
<slot
@@ -33,24 +34,11 @@ export default {
getKey: {
type: Function,
default: item => item.id
+ },
+ getClass: {
+ type: Function,
+ default: item => ''
}
}
}
</script>
-
-<style lang="scss">
-@import "../../variables";
-
-.list {
- &-item:not(:last-child) {
- border-bottom: 1px solid;
- border-bottom-color: $fallback--border;
- border-bottom-color: var(--border, $fallback--border);
- }
-
- &-empty-content {
- text-align: center;
- padding: 10px;
- }
-}
-</style>
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
@@ -0,0 +1,48 @@
+export default {
+ name: 'ListItem',
+ selector: '.list-item',
+ states: {
+ active: '.-active',
+ hover: ':hover'
+ },
+ validInnerComponents: [
+ 'Text',
+ 'Link',
+ 'Icon',
+ 'Border',
+ 'Button',
+ 'ButtonUnstyled',
+ 'RichContent',
+ 'Input',
+ 'Avatar'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg',
+ opacity: 0
+ }
+ },
+ {
+ state: ['active'],
+ directives: {
+ background: '--inheritedBackground, 10',
+ opacity: 1
+ }
+ },
+ {
+ state: ['hover'],
+ directives: {
+ background: '--inheritedBackground, 10',
+ opacity: 1
+ }
+ },
+ {
+ state: ['hover', 'active'],
+ directives: {
+ background: '--inheritedBackground, 20',
+ opacity: 1
+ }
+ }
+ ]
+}
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
@@ -12,7 +12,7 @@ export default {
],
states: {
hover: ':hover',
- active: '.active'
+ active: '.-active'
},
defaultRules: [
{
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
@@ -37,8 +37,8 @@
</NavigationEntry>
<div
v-show="showTimelines"
- class="timelines-background"
- :class="{ expanded: showTimelines }"
+ class="timelines-background menu-item-collapsible"
+ :class="{ '-expanded': showTimelines }"
>
<div class="timelines">
<NavigationEntry
@@ -75,8 +75,8 @@
</NavigationEntry>
<div
v-show="showLists"
- class="timelines-background"
- :class="{ expanded: showTimelines }"
+ class="timelines-background menu-item-collapsible"
+ :class="{ '-expanded': showLists }"
>
<ListsMenuContent
:show-pin="editMode || forceEditMode"
@@ -132,11 +132,6 @@
padding: 0 0 0 0.6em;
}
- .timelines-background.expanded + .NavigationEntry {
- border-top: 1px solid;
- border-color: var(--border);
- }
-
.nav-panel-heading {
// breaks without a unit
// stylelint-disable-next-line length-zero-no-unit
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -17,7 +17,8 @@ export default {
'UserCard',
'Chat',
'Attachment',
- 'Tab'
+ 'Tab',
+ 'ListItem'
],
defaultRules: [
{
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
@@ -42,8 +42,6 @@
<script src="./popover.js" />
<style lang="scss">
-@import "../../variables";
-
.popover-trigger-button {
display: inline-block;
}
@@ -89,12 +87,11 @@
height: 0;
margin: 0.5rem 0;
overflow: hidden;
- border-top: 1px solid $fallback--border;
- border-top: 1px solid var(--border, $fallback--border);
+ border-top: 1px solid var(--border);
}
.dropdown-item {
- border-bottom: none;
+ border: none;
&-icon {
svg {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
@@ -23,6 +23,7 @@
<List
:items="items"
:get-key="getKey"
+ :get-class="item => isSelected(item) ? '-active' : ''"
>
<template #item="{item}">
<div
@@ -51,9 +52,11 @@
<script src="./selectable_list.js"></script>
<style lang="scss">
-@import "../../variables";
-
.selectable-list {
+ --__line-height: 1.5em;
+ --__horizontal-gap: 0.75em;
+ --__vertical-gap: 0.5em;
+
&-item-inner {
display: flex;
align-items: center;
@@ -63,24 +66,12 @@
}
}
- &-item-selected-inner {
- background-color: $fallback--lightBg;
- background-color: var(--selectedMenu, $fallback--lightBg);
- color: var(--selectedMenuText, $fallback--text);
-
- --faint: var(--selectedMenuFaintText, $fallback--faint);
- --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
- --lightText: var(--selectedMenuLightText, $fallback--lightText);
- --icon: var(--selectedMenuIcon, $fallback--icon);
- }
-
&-header {
display: flex;
align-items: center;
- padding: 0.6em 0;
- border-bottom: 2px solid;
- border-bottom-color: $fallback--border;
- border-bottom-color: var(--border, $fallback--border);
+ padding: var(--__vertical-gap) var(--__horizontal-gap);
+ border-bottom: 1px solid;
+ border-bottom-color: var(--border);
&-actions {
flex: 1;
@@ -88,7 +79,7 @@
}
&-checkbox-wrapper {
- padding: 0 10px;
+ padding-right: var(--__horizontal-gap);
flex: none;
}
}
