implement list item styles

This commit is contained in:
Henry Jameson 2024-02-29 17:49:56 +02:00
parent 3f6b9fbf9c
commit 28c7fac9f0
10 changed files with 103 additions and 64 deletions

View File

@ -384,7 +384,8 @@ nav {
} }
} }
.menu-item { .menu-item,
.list-item {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
@ -397,9 +398,11 @@ nav {
color: inherit; color: inherit;
clear: both; clear: both;
position: relative; position: relative;
border-bottom: 1px solid;
white-space: nowrap; white-space: nowrap;
border-color: var(--border); border-color: var(--border);
border-style: solid;
border-width: 0;
border-top-width: 1px;
width: 100%; width: 100%;
line-height: var(--__line-height); line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap); padding: var(--__vertical-gap) var(--__horizontal-gap);
@ -408,8 +411,28 @@ nav {
--__horizontal-gap: 0.75em; --__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em; --__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, a,
button { button:not(.button-default) {
text-align: initial; text-align: initial;
padding: 0; padding: 0;
background: none; background: none;
@ -425,12 +448,13 @@ nav {
&:first-child { &:first-child {
border-top-right-radius: var(--roundness); border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness); border-top-left-radius: var(--roundness);
border-top-width: 0;
} }
&:last-child { &:last-child {
border-bottom-right-radius: var(--roundness); border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness); border-bottom-left-radius: var(--roundness);
border: none; border-bottom-width: 0;
} }
} }

View File

@ -47,7 +47,6 @@
display: flex; display: flex;
flex: 1 0; flex: 1 0;
margin: 0; margin: 0;
padding: 0.6em 1em;
--emoji-size: 14px; --emoji-size: 14px;

View File

@ -1,8 +1,6 @@
.chat-list-item { .chat-list-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0.75em;
height: 5em;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -12,7 +10,6 @@
} }
&:hover { &:hover {
background-color: var(--selectedPost, $fallback--lightBg);
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%); box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
} }
@ -29,7 +26,7 @@
.heading { .heading {
width: 100%; width: 100%;
display: inline-flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 1em; line-height: 1em;
} }
@ -47,18 +44,17 @@
} }
.chat-preview { .chat-preview {
display: inline-flex; display: flex;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0.35em 0; margin: 0.35em 0;
color: $fallback--text; color: var(--faintText);
color: var(--faint, $fallback--text);
width: 100%; width: 100%;
} }
a { a {
color: var(--faintLink, $fallback--link); color: var(--faintLink);
text-decoration: none; text-decoration: none;
pointer-events: none; pointer-events: none;
} }

View File

@ -7,6 +7,7 @@
v-for="item in items" v-for="item in items"
:key="getKey(item)" :key="getKey(item)"
class="list-item" class="list-item"
:class="getClass(item)"
role="listitem" role="listitem"
> >
<slot <slot
@ -33,24 +34,11 @@ export default {
getKey: { getKey: {
type: Function, type: Function,
default: item => item.id default: item => item.id
},
getClass: {
type: Function,
default: item => ''
} }
} }
} }
</script> </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>

View File

@ -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
}
}
]
}

View File

@ -12,7 +12,7 @@ export default {
], ],
states: { states: {
hover: ':hover', hover: ':hover',
active: '.active' active: '.-active'
}, },
defaultRules: [ defaultRules: [
{ {

View File

@ -37,8 +37,8 @@
</NavigationEntry> </NavigationEntry>
<div <div
v-show="showTimelines" v-show="showTimelines"
class="timelines-background" class="timelines-background menu-item-collapsible"
:class="{ expanded: showTimelines }" :class="{ '-expanded': showTimelines }"
> >
<div class="timelines"> <div class="timelines">
<NavigationEntry <NavigationEntry
@ -75,8 +75,8 @@
</NavigationEntry> </NavigationEntry>
<div <div
v-show="showLists" v-show="showLists"
class="timelines-background" class="timelines-background menu-item-collapsible"
:class="{ expanded: showTimelines }" :class="{ '-expanded': showLists }"
> >
<ListsMenuContent <ListsMenuContent
:show-pin="editMode || forceEditMode" :show-pin="editMode || forceEditMode"
@ -132,11 +132,6 @@
padding: 0 0 0 0.6em; padding: 0 0 0 0.6em;
} }
.timelines-background.expanded + .NavigationEntry {
border-top: 1px solid;
border-color: var(--border);
}
.nav-panel-heading { .nav-panel-heading {
// breaks without a unit // breaks without a unit
// stylelint-disable-next-line length-zero-no-unit // stylelint-disable-next-line length-zero-no-unit

View File

@ -17,7 +17,8 @@ export default {
'UserCard', 'UserCard',
'Chat', 'Chat',
'Attachment', 'Attachment',
'Tab' 'Tab',
'ListItem'
], ],
defaultRules: [ defaultRules: [
{ {

View File

@ -42,8 +42,6 @@
<script src="./popover.js" /> <script src="./popover.js" />
<style lang="scss"> <style lang="scss">
@import "../../variables";
.popover-trigger-button { .popover-trigger-button {
display: inline-block; display: inline-block;
} }
@ -89,12 +87,11 @@
height: 0; height: 0;
margin: 0.5rem 0; margin: 0.5rem 0;
overflow: hidden; overflow: hidden;
border-top: 1px solid $fallback--border; border-top: 1px solid var(--border);
border-top: 1px solid var(--border, $fallback--border);
} }
.dropdown-item { .dropdown-item {
border-bottom: none; border: none;
&-icon { &-icon {
svg { svg {

View File

@ -23,6 +23,7 @@
<List <List
:items="items" :items="items"
:get-key="getKey" :get-key="getKey"
:get-class="item => isSelected(item) ? '-active' : ''"
> >
<template #item="{item}"> <template #item="{item}">
<div <div
@ -51,9 +52,11 @@
<script src="./selectable_list.js"></script> <script src="./selectable_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.selectable-list { .selectable-list {
--__line-height: 1.5em;
--__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em;
&-item-inner { &-item-inner {
display: flex; display: flex;
align-items: center; 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 { &-header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.6em 0; padding: var(--__vertical-gap) var(--__horizontal-gap);
border-bottom: 2px solid; border-bottom: 1px solid;
border-bottom-color: $fallback--border; border-bottom-color: var(--border);
border-bottom-color: var(--border, $fallback--border);
&-actions { &-actions {
flex: 1; flex: 1;
@ -88,7 +79,7 @@
} }
&-checkbox-wrapper { &-checkbox-wrapper {
padding: 0 10px; padding-right: var(--__horizontal-gap);
flex: none; flex: none;
} }
} }