feat(list): introduce list-dividers classes and props to enable/dis…

…able dividers between items
framework7io · Sep 27, 2022 · 07a9420 · 07a9420
1 parent c5ed84b
commit 07a9420
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 58 deletions.
diff --git a/src/core/components/list/list-vars.less b/src/core/components/list/list-vars.less
@@ -1,6 +1,5 @@
 :root {
   --f7-list-inset-side-margin: 16px;
-  --f7-list-item-cell-margin: 16px;
   --f7-list-item-padding-horizontal: 16px;
   --f7-list-item-padding-vertical: 8px;
   --f7-list-media-item-padding-horizontal: 16px;
@@ -139,7 +138,7 @@
 
   --f7-list-item-min-height: 48px;
   --f7-list-item-media-icons-margin: 8px;
-  --f7-list-media-item-padding-vertical: 14px;
+  --f7-list-media-item-padding-vertical: 12px;
   --f7-list-media-item-title-font-weight: 500;
   --f7-list-button-border-color: transparent;
 

diff --git a/src/core/components/list/list.less b/src/core/components/list/list.less
@@ -232,33 +232,6 @@
     }
   }
 
-  .item-row {
-    .item-row();
-  }
-  .item-cell {
-    .item-cell();
-    width: 100%;
-    min-width: 0;
-    .ltr({
-      margin-left: var(--f7-list-item-cell-margin);
-      &:first-child {
-        margin-left: 0;
-      }
-    });
-    .rtl({
-      margin-right: var(--f7-list-item-cell-margin);
-      &:first-child {
-        margin-right: 0;
-      }
-    });
-    flex-shrink: 1;
-  }
-  .ltr({
-    .ripple-wave + .item-cell {
-      margin-left: 0;
-    }
-  });
-
   // Last-childs
   li {
     &:last-child {
@@ -293,10 +266,15 @@
   font-size: var(--f7-list-button-font-size);
   font-weight: var(--f7-list-button-font-weight);
   text-align: var(--f7-list-button-text-align);
-  .hairline(bottom, var(--f7-list-button-border-color));
+
   &.active-state {
     background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
   }
+  .list-dividers &,
+  .ios .list-dividers-ios &,
+  .md .list-dividers-md & {
+    .hairline(bottom, var(--f7-list-button-border-color));
+  }
 }
 .list-button[class*='color-'] {
   --f7-list-button-text-color: var(--f7-theme-color);
@@ -388,10 +366,27 @@
     .hairline-remove(bottom);
   }
 }
-.simple-list li,
-.links-list a,
-.list .item-inner {
-  .hairline(bottom, var(--f7-list-item-border-color));
+.list-dividers,
+.ios .list-dividers-ios,
+.md .list-dividers-md {
+  &.simple-list li,
+  &.links-list a,
+  .item-inner {
+    .hairline(bottom, var(--f7-list-item-border-color));
+  }
+}
+
+.md .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content,
+.md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content {
+  margin-left: calc(var(--f7-list-item-padding-horizontal) / 2);
+  margin-right: calc(var(--f7-list-item-padding-horizontal) / 2);
+  border-radius: 16px;
+  .ltr({
+    padding-left: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-left) - var(--menu-list-offset));
+  });
+  .rtl({
+    padding-right: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-right) - var(--menu-list-offset));
+  });
 }
 
 .media-list,
@@ -409,7 +404,6 @@ li.media-item {
     align-self: stretch;
   }
   .item-media {
-    align-self: flex-start;
     img {
       display: block;
     }

diff --git a/src/react/components/list.jsx b/src/react/components/list.jsx
@@ -44,6 +44,9 @@ import { VirtualList } from 'framework7/types';
   outline?: boolean
   outlineIos?: boolean
   outlineMd?: boolean
+  dividers?: boolean
+  dividersIos?: boolean
+  dividersMd?: boolean
   mediaList? : boolean
   sortable? : boolean
   sortableTapHold? : boolean
@@ -56,9 +59,6 @@ import { VirtualList } from 'framework7/types';
   simpleList? : boolean
   linksList? : boolean
   menuList? : boolean
-  noHairlinesBetween? : boolean
-  noHairlinesBetweenMd? : boolean
-  noHairlinesBetweenIos? : boolean
   noChevron? : boolean
   chevronCenter? : boolean
   tab? : boolean
@@ -114,6 +114,9 @@ const List = forwardRef((props, ref) => {
     outline,
     outlineIos,
     outlineMd,
+    dividers,
+    dividersIos,
+    dividersMd,
     mediaList,
     sortable,
     sortableTapHold,
@@ -126,9 +129,6 @@ const List = forwardRef((props, ref) => {
     simpleList,
     linksList,
     menuList,
-    noHairlinesBetween,
-    noHairlinesBetweenMd,
-    noHairlinesBetweenIos,
     noChevron,
     chevronCenter,
     tab,
@@ -304,6 +304,9 @@ const List = forwardRef((props, ref) => {
       'list-outline': outline,
       'list-outline-ios': outlineIos,
       'list-outline-md': outlineMd,
+      'list-dividers': dividers,
+      'list-dividers-ios': dividersIos,
+      'list-dividers-md': dividersMd,
       'media-list': mediaList,
       'simple-list': simpleList,
       'links-list': linksList,
@@ -318,9 +321,6 @@ const List = forwardRef((props, ref) => {
       'virtual-list': virtualList,
       tab,
       'tab-active': tabActive,
-      'no-hairlines-between': noHairlinesBetween,
-      'no-hairlines-between-md': noHairlinesBetweenMd,
-      'no-hairlines-between-ios': noHairlinesBetweenIos,
       'form-store-data': formStoreData,
       'inline-labels': inlineLabels,
       'no-chevron': noChevron,

diff --git a/src/svelte/components/list.svelte b/src/svelte/components/list.svelte
@@ -38,6 +38,9 @@
   export let outline = false;
   export let outlineIos = false;
   export let outlineMd = false;
+  export let dividers = false;
+  export let dividersIos = false;
+  export let dividersMd = false;
   export let mediaList = false;
   export let sortable = false;
   export let sortableTapHold = false;
@@ -51,10 +54,6 @@
   export let linksList = false;
   export let menuList = false;
 
-  export let noHairlinesBetween = false;
-  export let noHairlinesBetweenMd = false;
-  export let noHairlinesBetweenIos = false;
-
   // Links Chevron (Arrow) Icon
   export let noChevron = false;
   export let chevronCenter = false;
@@ -110,6 +109,9 @@
       'list-outline': outline,
       'list-outline-ios': outlineIos,
       'list-outline-md': outlineMd,
+      'list-dividers': outline,
+      'list-dividers-ios': outlineIos,
+      'list-dividers-md': outlineMd,
       'media-list': mediaList,
       'simple-list': simpleList,
       'links-list': linksList,
@@ -124,9 +126,6 @@
       'virtual-list': virtualList,
       tab,
       'tab-active': tabActive,
-      'no-hairlines-between': noHairlinesBetween,
-      'no-hairlines-between-md': noHairlinesBetweenMd,
-      'no-hairlines-between-ios': noHairlinesBetweenIos,
       'form-store-data': formStoreData,
       'inline-labels': inlineLabels,
       'no-chevron': noChevron,

diff --git a/src/vue/components/list.vue b/src/vue/components/list.vue
@@ -32,6 +32,9 @@ export default {
     outline: Boolean,
     outlineIos: Boolean,
     outlineMd: Boolean,
+    dividers: Boolean,
+    dividersIos: Boolean,
+    dividersMd: Boolean,
     mediaList: Boolean,
     sortable: Boolean,
     sortableTapHold: Boolean,
@@ -48,10 +51,6 @@ export default {
     linksList: Boolean,
     menuList: Boolean,
 
-    noHairlinesBetween: Boolean,
-    noHairlinesBetweenMd: Boolean,
-    noHairlinesBetweenIos: Boolean,
-
     // Links Chevron (Arrow) Icon
     noChevron: Boolean,
     chevronCenter: Boolean,
@@ -190,6 +189,9 @@ export default {
           'list-outline': props.outline,
           'list-outline-ios': props.outlineIos,
           'list-outline-md': props.outlineMd,
+          'list-dividers': props.dividers,
+          'list-dividers-ios': props.dividersIos,
+          'list-dividers-md': props.dividersMd,
           'media-list': props.mediaList,
           'simple-list': props.simpleList,
           'links-list': props.linksList,
@@ -204,9 +206,6 @@ export default {
           'virtual-list': props.virtualList,
           tab: props.tab,
           'tab-active': props.tabActive,
-          'no-hairlines-between': props.noHairlinesBetween,
-          'no-hairlines-between-md': props.noHairlinesBetweenMd,
-          'no-hairlines-between-ios': props.noHairlinesBetweenIos,
           'form-store-data': props.formStoreData,
           'inline-labels': props.inlineLabels,
           'no-chevron': props.noChevron,