fix listview

olton · Sep 28, 2018 · cb9fd24 · cb9fd24
1 parent c22a013
commit cb9fd24
Show file tree

Hide file tree

Showing 21 changed files with 202 additions and 386 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 ### 4.2.24
++ [x] ListView: fix method `_createNode` for `structure` option, issue #1220 
++ [x] ListView: fix methods `insertBefore`, `insertAfter`
 + [x] Tabs: change `expand` behavior
++ [x] Tabs: fix expand/collapse behavior
 + [x] Select: add attribute `data-cls-option-active`
 + [x] Countdown: fix performance and minor bugs
 + [x] Countdown: fix deferred start setup

diff --git a/build/css/metro-all.css b/build/css/metro-all.css
@@ -40294,21 +40294,26 @@ video:-webkit-full-screen {
   position: relative;
   display: inline-block;
   height: 48px;
-  padding: 16px 16px;
   cursor: pointer;
   opacity: 0.6;
   text-align: center;
   text-transform: uppercase;
   margin: 0;
   overflow: hidden;
   max-width: 360px;
+  min-width: 98px;
   background-color: inherit;
   color: inherit;
 }
 .tabs-material li a {
+  display: block;
+  position: relative;
+  padding: 16px 16px;
   background-color: inherit;
   color: inherit;
   text-decoration: none;
+  font-weight: 500;
+  white-space: nowrap;
 }
 .tabs-material li .icon {
   width: 24px;
@@ -40317,6 +40322,12 @@ video:-webkit-full-screen {
   font-size: 22px;
   display: block;
 }
+.tabs-material li:nth-child(1) {
+  margin-left: 8px;
+}
+.tabs-material li:last-of-type {
+  margin-right: 8px;
+}
 .tabs-material.with-icons li {
   height: 72px;
 }
@@ -40330,27 +40341,8 @@ video:-webkit-full-screen {
 .tabs-material li:not(:hover) {
   border-bottom-color: transparent;
 }
-.tabs-material.equal-tabs li {
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-.tabs-material.compact {
-  height: auto;
-}
-.tabs-material.compact li {
-  display: block;
-  border-bottom: 0 #ccc solid;
-}
-.tabs-material.compact li:active {
-  border-bottom: inherit;
-}
-.tabs-material .tabs-container {
-  margin: 0 auto;
-}
 .tabs-material .tab-marker {
+  display: block;
   position: absolute;
   height: 2px;
   background: #CE352C;
@@ -40359,59 +40351,32 @@ video:-webkit-full-screen {
   left: 0;
   color: transparent;
   opacity: 1;
+  min-width: 98px;
 }
-.tabs-material.overflow {
-  padding: 0 32px;
-  overflow: hidden;
-}
-.tabs-material.overflow .scroll-control-left,
-.tabs-material.overflow .scroll-control-right {
-  display: block;
+.tabs-material .tab-badge {
   position: absolute;
-  left: 0;
-  width: 32px;
-  color: inherit;
-  height: 48px;
-  cursor: pointer;
-  z-index: 2;
-  background-color: inherit;
-  text-align: center;
-}
-.tabs-material.overflow .scroll-control-left:before,
-.tabs-material.overflow .scroll-control-right:before {
-  display: block;
-  width: 100%;
-  content: "\2039";
-  font-size: 1.6em;
-  height: 48px;
-  line-height: 48px;
-}
-.tabs-material.overflow .scroll-control-right {
-  left: auto;
-  right: 0;
-}
-.tabs-material.overflow .scroll-control-right:before {
-  content: "\203A";
+  top: 8px;
+  right: 8px;
+  padding: 4px;
 }
 .tabs-material.deep {
   z-index: 1029;
 }
-.tabs-material.icons {
-  height: 64px;
+.tabs-material.fixed-tabs {
+  overflow-x: hidden;
 }
-.tabs-material.icons li {
-  height: 64px;
-  font-size: 11px;
+.tabs-material.fixed-tabs li {
+  -ms-flex-preferred-size: 0;
+      flex-basis: 0;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
-.tabs-material.icons li [class*=i-] {
-  display: block;
-  font-size: 28px;
+.tabs-material.fixed-tabs li:nth-child(1) {
+  margin-left: 0;
 }
-.tabs-material .tab-badge {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  padding: 4px;
+.tabs-material.fixed-tabs li:last-child {
+  margin-right: 0;
 }
 .head-bar ~ .fixed-tabs,
 .tabs-material.app-bar-present {

diff --git a/build/css/metro-all.min.css b/build/css/metro-all.min.css
diff --git a/build/css/metro.css b/build/css/metro.css
@@ -40294,21 +40294,26 @@ video:-webkit-full-screen {
   position: relative;
   display: inline-block;
   height: 48px;
-  padding: 16px 16px;
   cursor: pointer;
   opacity: 0.6;
   text-align: center;
   text-transform: uppercase;
   margin: 0;
   overflow: hidden;
   max-width: 360px;
+  min-width: 98px;
   background-color: inherit;
   color: inherit;
 }
 .tabs-material li a {
+  display: block;
+  position: relative;
+  padding: 16px 16px;
   background-color: inherit;
   color: inherit;
   text-decoration: none;
+  font-weight: 500;
+  white-space: nowrap;
 }
 .tabs-material li .icon {
   width: 24px;
@@ -40317,6 +40322,12 @@ video:-webkit-full-screen {
   font-size: 22px;
   display: block;
 }
+.tabs-material li:nth-child(1) {
+  margin-left: 8px;
+}
+.tabs-material li:last-of-type {
+  margin-right: 8px;
+}
 .tabs-material.with-icons li {
   height: 72px;
 }
@@ -40330,27 +40341,8 @@ video:-webkit-full-screen {
 .tabs-material li:not(:hover) {
   border-bottom-color: transparent;
 }
-.tabs-material.equal-tabs li {
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-.tabs-material.compact {
-  height: auto;
-}
-.tabs-material.compact li {
-  display: block;
-  border-bottom: 0 #ccc solid;
-}
-.tabs-material.compact li:active {
-  border-bottom: inherit;
-}
-.tabs-material .tabs-container {
-  margin: 0 auto;
-}
 .tabs-material .tab-marker {
+  display: block;
   position: absolute;
   height: 2px;
   background: #CE352C;
@@ -40359,59 +40351,32 @@ video:-webkit-full-screen {
   left: 0;
   color: transparent;
   opacity: 1;
+  min-width: 98px;
 }
-.tabs-material.overflow {
-  padding: 0 32px;
-  overflow: hidden;
-}
-.tabs-material.overflow .scroll-control-left,
-.tabs-material.overflow .scroll-control-right {
-  display: block;
+.tabs-material .tab-badge {
   position: absolute;
-  left: 0;
-  width: 32px;
-  color: inherit;
-  height: 48px;
-  cursor: pointer;
-  z-index: 2;
-  background-color: inherit;
-  text-align: center;
-}
-.tabs-material.overflow .scroll-control-left:before,
-.tabs-material.overflow .scroll-control-right:before {
-  display: block;
-  width: 100%;
-  content: "\2039";
-  font-size: 1.6em;
-  height: 48px;
-  line-height: 48px;
-}
-.tabs-material.overflow .scroll-control-right {
-  left: auto;
-  right: 0;
-}
-.tabs-material.overflow .scroll-control-right:before {
-  content: "\203A";
+  top: 8px;
+  right: 8px;
+  padding: 4px;
 }
 .tabs-material.deep {
   z-index: 1029;
 }
-.tabs-material.icons {
-  height: 64px;
+.tabs-material.fixed-tabs {
+  overflow-x: hidden;
 }
-.tabs-material.icons li {
-  height: 64px;
-  font-size: 11px;
+.tabs-material.fixed-tabs li {
+  -ms-flex-preferred-size: 0;
+      flex-basis: 0;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
-.tabs-material.icons li [class*=i-] {
-  display: block;
-  font-size: 28px;
+.tabs-material.fixed-tabs li:nth-child(1) {
+  margin-left: 0;
 }
-.tabs-material .tab-badge {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  padding: 4px;
+.tabs-material.fixed-tabs li:last-child {
+  margin-right: 0;
 }
 .head-bar ~ .fixed-tabs,
 .tabs-material.app-bar-present {

diff --git a/build/css/metro.min.css b/build/css/metro.min.css
diff --git a/build/js/metro.js b/build/js/metro.js
@@ -12288,7 +12288,7 @@ var Listview = {
             node.prepend(this._createIcon(data.icon));
         }
 
-        if (Utils.objectLength(o.structure > 0)) $.each(o.structure, function(key, val){
+        if (Utils.objectLength(o.structure) > 0) $.each(o.structure, function(key, val){
             if (data[key] !== undefined) {
                 $("<div>").addClass("node-data item-data-"+key).addClass(data[val]).html(data[key]).appendTo(node);
             }
@@ -12480,15 +12480,15 @@ var Listview = {
     insertBefore: function(node, data){
         var element = this.element, o = this.options;
         var new_node = this._createNode(data);
-        new_node.insertBefore(node);
+        new_node.addClass("node").insertBefore(node);
         Utils.exec(o.onNodeInsert, [new_node, element]);
         return new_node;
     },
 
     insertAfter: function(node, data){
         var element = this.element, o = this.options;
         var new_node = this._createNode(data);
-        new_node.insertAfter(node);
+        new_node.addClass("node").insertAfter(node);
         Utils.exec(o.onNodeInsert, [new_node, element]);
         return new_node;
     },
@@ -18844,7 +18844,7 @@ var TabsMaterial = {
 
         if (this.marker.length === 0) {
 
-            this.marker = $("<li>").addClass("tab-marker").appendTo(element);
+            this.marker = $("<span>").addClass("tab-marker").appendTo(element);
 
             if (Utils.isValue(o.markerColor)) {
                 if (Utils.isColor(o.markerColor)) {
@@ -18897,6 +18897,7 @@ var Tabs = {
         clsTabs: "",
         clsTabsList: "",
         clsTabsListItem: "",
+        clsTabsListItemActive: "",
 
         onTab: Metro.noop,
         onBeforeTab: Metro.noop_true,
@@ -18938,14 +18939,7 @@ var Tabs = {
             element.attr("id", Utils.elementId("tabs"));
         }
 
-        // if (Utils.isValue(o.expand)) {
-        //     container.addClass("tabs-expand-"+o.expand);
-        // }
-
         container.addClass(o.tabsPosition.replace(["-", "_", "+"], " "));
-        // if (o.tabsPosition.contains("vertical")) {
-        //     container.addClass("tabs-expand-fs"); // TODO need redesign this behavior
-        // }
 
         element.addClass("tabs-list");
         if (!right_parent) {
@@ -19000,7 +18994,9 @@ var Tabs = {
                 container.addClass("tabs-expand");
             } else {
                 if (Utils.isValue(o.expandPoint) && Utils.mediaExist(o.expandPoint) && !o.tabsPosition.contains("vertical")) {
-                    container.addClass("tabs-expand");
+                    if (!container.hasClass("tabs-expand")) container.addClass("tabs-expand");
+                } else {
+                    if (container.hasClass("tabs-expand")) container.removeClass("tabs-expand");
                 }
             }
         });
@@ -19095,6 +19091,8 @@ var Tabs = {
 
         expandTitle.html(tab.find("a").html());
 
+        tab.addClass(o.clsTabsListItemActive);
+
         Utils.exec(o.onTab, [tab, element]);
     },
 

diff --git a/build/js/metro.min.js b/build/js/metro.min.js
diff --git a/build/js/metro.min.js.map b/build/js/metro.min.js.map