Harmonize grid list css

Scille · Jun 19, 2024 · b277e2c · b277e2c
1 parent 6a57739
commit b277e2c
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 169 deletions.
diff --git a/client/src/components/files/FileCard.vue b/client/src/components/files/FileCard.vue
@@ -35,8 +35,8 @@
       >
         <ion-icon :icon="ellipsisHorizontal" />
       </div>
-      <div class="card-content">
-        <div class="card-content-icons">
+      <div class="file-card">
+        <div class="file-card-icons">
           <ms-image
             :image="entry.isFile() ? getFileIcon(entry.name) : Folder"
             class="file-icon"
@@ -48,11 +48,11 @@
           />
         </div>
 
-        <ion-text class="card-content__title body">
+        <ion-text class="file-card__title body">
           {{ entry.name }}
         </ion-text>
 
-        <ion-text class="card-content-last-update body-sm">
+        <ion-text class="file-card-last-update body-sm">
           {{ $msTranslate(formatTimeSince(entry.updated, '--', 'short')) }}
         </ion-text>
       </div>
@@ -114,37 +114,12 @@ async function onOptionsClick(event: Event): Promise<void> {
 
 <style lang="scss" scoped>
 .file-card-item {
-  position: relative;
-  cursor: default;
-  text-align: center;
   --background: var(--parsec-color-light-secondary-background);
   background: var(--parsec-color-light-secondary-background);
-  border: 1px solid var(--parsec-color-light-secondary-medium);
+  cursor: default;
+  text-align: center;
   user-select: none;
-  border-radius: var(--parsec-radius-12);
   width: 10.5rem;
-
-  &::part(native) {
-    --inner-padding-end: 0px;
-    height: 100%;
-  }
-
-  &:hover {
-    --background: var(--parsec-color-light-primary-30);
-    --background-hover: var(--parsec-color-light-primary-30);
-    --background-hover-opacity: 1;
-  }
-
-  &.selected {
-    --background: var(--parsec-color-light-primary-100);
-    --background-hover: var(--parsec-color-light-primary-100);
-    border: 1px solid var(--parsec-color-light-primary-300);
-  }
-}
-
-.card-option,
-.card-checkbox {
-  position: absolute;
 }
 
 .card-checkbox {
@@ -153,22 +128,12 @@ async function onOptionsClick(event: Event): Promise<void> {
 }
 
 .card-option {
-  color: var(--parsec-color-light-secondary-grey);
-  text-align: right;
-  display: flex;
-  align-items: center;
+  padding: 0.5rem;
   top: 0;
   right: 0;
-  font-size: 1.5rem;
-  padding: 0.5rem;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--parsec-color-light-primary-500);
-  }
 }
 
-.card-content {
+.file-card {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -224,7 +189,7 @@ async function onOptionsClick(event: Event): Promise<void> {
   }
 }
 
-.card-content-last-update {
+.file-card-last-update {
   color: var(--parsec-color-light-secondary-grey);
   text-align: center;
   display: flex;
@@ -234,8 +199,8 @@ async function onOptionsClick(event: Event): Promise<void> {
 }
 
 /* No idea how to change the color of the ion-item */
-.card-content__title::part(native),
-.card-content-last-update::part(native) {
+.file-card__title::part(native),
+.file-card-last-update::part(native) {
   background-color: var(--parsec-color-light-secondary-background);
 }
 </style>
diff --git a/client/src/components/files/FileListItem.vue b/client/src/components/files/FileListItem.vue
@@ -11,6 +11,7 @@
       button
       lines="full"
       :detail="false"
+      class="file-list-item"
       :class="{
         selected: entry.isSelected,
         'file-hovered': !entry.isSelected && (menuOpened || isHovered),

diff --git a/client/src/components/users/UserCard.vue b/client/src/components/users/UserCard.vue
@@ -15,7 +15,7 @@
     @mouseleave="isHovered = false"
   >
     <div
-      class="user-card-checkbox"
+      class="card-checkbox"
       v-if="!user.isRevoked() && !user.isCurrent"
     >
       <!-- eslint-disable vue/no-mutating-props -->
@@ -34,7 +34,7 @@
       <user-status-tag :revoked="user.isRevoked()" />
     </div>
     <div
-      class="user-card-option"
+      class="card-option"
       v-show="isHovered || menuOpened"
       @click.stop="onOptionsClick($event)"
     >
@@ -104,19 +104,12 @@ async function onOptionsClick(event: Event): Promise<void> {
 
 <style scoped lang="scss">
 .user-card-item {
-  --background: none;
+  --background: inherit;
   --background-hover: none;
 
-  border: 1px solid var(--parsec-color-light-secondary-medium);
   width: 14rem;
-  border-radius: var(--parsec-radius-12);
-  position: relative;
   height: fit-content;
 
-  &::part(native) {
-    --inner-padding-end: 0px;
-  }
-
   &:hover:not(.revoked) {
     background: var(--parsec-color-light-primary-30);
 
@@ -136,9 +129,6 @@ async function onOptionsClick(event: Event): Promise<void> {
   }
 
   &.selected:not(.revoked) {
-    --background: var(--parsec-color-light-primary-100);
-    border: 1px solid var(--parsec-color-light-primary-100);
-
     .user-card-info__name {
       color: var(--parsec-color-light-primary-700);
     }
@@ -149,31 +139,15 @@ async function onOptionsClick(event: Event): Promise<void> {
   }
 }
 
-.user-card-option,
-.user-card-checkbox {
-  position: absolute;
-  z-index: 10;
-}
-
-.user-card-checkbox {
+.card-checkbox {
   top: 1rem;
   right: 1rem;
 }
 
-.user-card-option {
-  color: var(--parsec-color-light-secondary-grey);
-  text-align: right;
-  display: flex;
-  align-items: center;
-  bottom: 0;
-  right: 0;
-  font-size: 1.5rem;
+.card-option {
   padding: 1rem;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--parsec-color-light-primary-500);
-  }
+  right: 0;
+  bottom: 0;
 }
 
 .user-card {