Merge pull request #5476 from nextcloud-libraries/backport/5400/next

[next] fix(NcListItem): bring back old styling for two-line list items

src/components/NcListItem/NcListItem.vue

@@ -27,7 +27,7 @@
  <ul>
  <NcListItem
  :name="'This is an active element with highlighted counter'"
- :bold="false"
+ :bold="true"
  :active="true"
  :details="'1h'"
  :counter-number="44"
@@ -63,7 +63,6 @@
  :name="'This is an active element with outlined counter'"
  :bold="false"
  :active="true"
- :details="'1h'"
  :counter-number="44"
  counterType="outlined">
  <template #icon>
@@ -120,7 +119,7 @@
  </NcListItem>
  <NcListItem
  :name="'Name of the element with highlighted counter'"
- :bold="false"
+ :bold="true"
  :force-display-actions="true"
  :details="'1h'"
  :counter-number="44"
@@ -147,7 +146,6 @@
  :name="'Name of the element with outlined counter'"
  :bold="false"
  :force-display-actions="true"
- :details="'1h'"
  :counter-number="44"
  counterType="outlined">
  <template #icon>
@@ -403,7 +401,7 @@
  </div>
  <div v-if="hasSubname"
  class="list-item-content__subname"
- :class="{'line-two--bold': bold}">
+ :class="{'list-item-content__subname--bold': bold}">
  <!-- @slot Slot for the second line of the component -->
  <slot name="subname" />
  </div>
@@ -772,12 +770,16 @@ export default {
  min-width: 100px;
  max-width: 300px;
  flex: 1 1 10%;
- text-overflow: ellipsis;
+ font-weight: 500;
 }
 
 .list-item-content__subname {
  flex: 1 0;
  min-width: 0;
+ color: var(--color-text-maxcontrast);
+ &--bold {
+ font-weight: 500;
+ }
 }
 
 // NcListItem
@@ -820,11 +822,12 @@ export default {
  }
  .list-item-content__details {
  display: flex;
- flex-direction: row;
+ flex-direction: column;
  justify-content: end;
+ align-items: end;
  }
  &--one-line {
- padding: 10px;
+ padding: 0 9px;
  margin: 2px;
  .list-item-content__main {
  display: flex;
@@ -833,8 +836,8 @@ export default {
  min-width: 0;
  }
  .list-item-content__details {
- display: flex;
  flex-direction: row;
+ align-items: unset;
  justify-content: end;
  }
  }
@@ -879,7 +882,7 @@ export default {
  &-details {
  &__details {
  color: var(--color-text-maxcontrast);
- margin: 0 9px;
+ margin: 0 9px !important;
  font-weight: normal;
  }
  &__extra {