refactor: some styles and also avatar options

globalbrain · Oct 28, 2022 · e8f7cc8 · e8f7cc8
1 parent 0f19287
commit e8f7cc8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/lib/components/SDropdownSectionFilter.vue b/lib/components/SDropdownSectionFilter.vue
@@ -125,7 +125,6 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
 .button {
   display: flex;
-  align-items: center;
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
@@ -145,6 +144,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
 .checkbox {
   display: block;
+  padding-top: 9px;
 }
 
 .checkbox-box {
@@ -177,6 +177,11 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   }
 }
 
+.option-item {
+  padding-left: 8px;
+  width: 100%;
+}
+
 .empty {
   padding: 16px;
   font-size: 12px;
@@ -187,8 +192,4 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
     border-top: 1px solid var(--c-divider-light);
   }
 }
-
-.option-item {
-  margin-left: 8px;
-}
 </style>
diff --git a/lib/components/SDropdownSectionFilterItemAvatar.vue b/lib/components/SDropdownSectionFilterItemAvatar.vue
@@ -9,23 +9,32 @@ defineProps<{
 
 <template>
   <span class="SDropdownSectionFilterItemAvatar">
-    <SAvatar size="nano" :avatar="image" :name="label" />
+    <div class="avatar">
+      <SAvatar size="nano" :avatar="image" :name="label" />
+    </div>
     <span class="name">{{ label }}</span>
   </span>
 </template>
 
 <style scoped lang="postcss">
 .SDropdownSectionFilterItemAvatar {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  padding-left: 8px;
+  padding-right: 16px;
   min-height: 32px;
 }
 
+.avatar {
+  flex-shrink: 0;
+}
+
 .name {
   display: inline-block;
   padding-left: 8px;
   font-size: 12px;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
diff --git a/lib/components/SDropdownSectionFilterItemText.vue b/lib/components/SDropdownSectionFilterItemText.vue
@@ -6,13 +6,18 @@ defineProps<{
 
 <template>
   <span class="SDropdownSectionFilterItemText">
-    {{ label }}
+    <span class="text">{{ label }}</span>
   </span>
 </template>
 
 <style scoped lang="postcss">
 .SDropdownSectionFilterItemText {
-  line-height: 32px;
+  display: inline-block;
+  padding: 6px 0;
+}
+
+.text {
+  line-height: 20px;
   font-size: 12px;
   font-weight: 500;
 }