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;
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;
}
}

View File

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

View File

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

View File

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

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: {
hover: ':hover',
active: '.active'
active: '.-active'
},
defaultRules: [
{

View File

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

View File

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

View File

@ -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 {

View File

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