Revert listItem bold title

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
nextcloud-libraries · Aug 30, 2022 · 83a5041 · 83a5041
1 parent fac811c
commit 83a5041
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 5 deletions.
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -636,7 +636,7 @@ export default {
  min-height: $clickable-area;
  transition: background-color var(--animation-quick) ease-in-out;
  transition: background-color 200ms ease-in-out;
- border-radius: var(--border-radius-pill);
+ border-radius: 16px;
 
  &-wrapper {
  position: relative;

diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -182,6 +182,49 @@
  </NcListItem>
 </ul>
 ```
+
+### NcListItem not bold or fully bold
+```
+<ul style="width: 350px;">
+ <NcListItem
+ :title="'Title of the element'"
+ :bold="true"
+ :counter-number="1"
+ :compact="true" >
+ <template #icon>
+ <div class="icon-edit" />
+ </template>
+ <template #subtitle>
+ This one is with subtitle
+ </template>
+ <template #actions>
+ <NcActionButton>
+ Button one
+ </NcActionButton>
+ <NcActionButton>
+ Button two
+ </NcActionButton>
+ </template>
+ </NcListItem>
+ <NcListItem
+ :title="'Title of the element'"
+ :counter-number="2"
+ :compact="true" >
+ <template #icon>
+ <div class="icon-edit" />
+ </template>
+ </NcListItem>
+ <NcListItem
+ :title="'Title of the element'"
+ :counter-number="3"
+ :boldTitle="false"
+ :compact="true" >
+ <template #icon>
+ <div class="icon-edit" />
+ </template>
+ </NcListItem>
+</ul>
+```
 </docs>
 
 <template>
@@ -215,7 +258,8 @@
  :class="{ 'list-item-content__main--oneline': oneLine }">
 
  <!-- First line, title and details -->
- <div class="line-one">
+ <div class="line-one"
+ :class="{'line-one--bold': bold || boldTitle}">
  <span class="line-one__title">
  {{ title }}
  </span>
@@ -341,7 +385,15 @@ export default {
  },
 
  /**
- * Make subtitle bold
+ * Make only title bold
+ */
+ boldTitle: {
+ type: Boolean,
+ default: true,
+ },
+
+ /**
+ * Make title and subtitle bold
  */
  bold: {
  type: Boolean,
@@ -570,7 +622,7 @@ export default {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 8px;
- border-radius: var(--border-radius-pill);
+ border-radius: 16px;
  margin: 2px 0;
  width: 100%;
  cursor: pointer;
@@ -637,14 +689,16 @@ export default {
  white-space: nowrap;
  margin: 0 auto 0 0;
  overflow: hidden;
+ &--bold {
+ font-weight: bold;
+ }
 
  &__title {
  overflow: hidden;
  flex-grow: 1;
  cursor: pointer;
  text-overflow: ellipsis;
  color: var(--color-main-text);
- font-weight: bold;
  }
 
  &__details {