From 28c7fac9f0b740473575200051bc2983ec5c9be9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 17:49:56 +0200
Subject: implement list item styles

---
 src/components/selectable_list/selectable_list.vue | 27 ++++++++--------------
 1 file changed, 9 insertions(+), 18 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 14910fc5..e54132d6 100644
--- 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;
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 01f6f89c7de7dee3c91d2850490981d73a3c0465 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 19:54:25 +0200
Subject: interactive lists & non-interactive lists

---
 src/App.scss                                       | 4 ++++
 src/components/list/list.vue                       | 6 +++++-
 src/components/list/list_item.style.js             | 2 +-
 src/components/selectable_list/selectable_list.vue | 2 ++
 src/components/user_profile/user_profile.vue       | 4 ++--
 5 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/App.scss b/src/App.scss
index 9e549b86..289add77 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -411,6 +411,10 @@ nav {
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  &.-non-interactive {
+    cursor: auto;
+  }
+
   &.-active,
   &:hover {
     border-top-width: 1px;
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index b8fcaf9d..c885bacd 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -7,7 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
-      :class="getClass(item)"
+      :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
       role="listitem"
     >
       <slot
@@ -38,6 +38,10 @@ export default {
     getClass: {
       type: Function,
       default: item => ''
+    },
+    nonInteractive: {
+      type: Boolean,
+      default: false
     }
   }
 }
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
index ae8dc5f4..e82a0a83 100644
--- a/src/components/list/list_item.style.js
+++ b/src/components/list/list_item.style.js
@@ -3,7 +3,7 @@ export default {
   selector: '.list-item',
   states: {
     active: '.-active',
-    hover: ':hover'
+    hover: ':hover:not(.-non-interactive)'
   },
   validInnerComponents: [
     'Text',
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index e54132d6..3d3a5ff0 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -29,11 +29,13 @@
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
+          @click.stop="toggle(!isSelected(item), item)"
         >
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox
               :model-value="isSelected(item)"
               @update:model-value="checked => toggle(checked, item)"
+              @click.stop
             />
           </div>
           <slot
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 042d5221..011f32da 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -75,7 +75,7 @@
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList :user-id="userId">
+          <FriendList :user-id="userId" :non-interactive="true">
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
@@ -87,7 +87,7 @@
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList :user-id="userId">
+          <FollowerList :user-id="userId" :non-interactive="true">
             <template #item="{item}">
               <FollowCard
                 :user="item"
-- 
cgit v1.2.3-70-g09d2