Merge pull request massiveart#608 from massiveart/feature/different-m…

…atrix-values enabled matrix to have different values in each row
niklasnatter · Feb 24, 2016 · 0eed462 · 0eed462
2 parents 5b19999 + 9a9b5b4
commit 0eed462
Show file tree

Hide file tree

Showing 8 changed files with 330 additions and 275 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # CHANGELOG for husky
 
 * dev-develop
+    * FEATURE     #608 Allows each row in the matrix component to have different values
     * ENHANCEMENT #595 Added default label for is-native selects
     * ENHANCEMENT #594 Changed style of warning label
     * ENHANCEMENT #593 Changed toggler to only use data attribute

diff --git a/demos/matrix/index.html b/demos/matrix/index.html
@@ -15,22 +15,15 @@
     <meta name="viewport" content="width=device-width">
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
     <link rel="stylesheet" href="../../dist/husky.min.css">
-    <style>
-        #container {
-            width: 800px;
-            margin-left: 300px;
-            margin-top: 100px;
-        }
-    </style>
 </head>
 <body>
-<div id="container">
+
+<div id="matrix">
 
     <button id="set-all">Set All</button>
     <button id="unset-all">Unset All</button>
 </div>
 
-
 <script src="../js/jquery.js"></script>
 <script src="../js/require.js"></script>
 <script src="../js/defaults.js"></script>
@@ -43,17 +36,18 @@
     require(['lib/husky'], function(Husky) {
         'use strict';
 
-        var app = Husky({ debug: { enable: true }}),
-                _ = app.sandbox.util._;
+        var app = Husky({debug: {enable: true}}),
+            _ = app.sandbox.util._;
 
         app.start().then(function() {
             app.logger.log('Aura started...');
 
+
             app.sandbox.start([
                 {
                     name: 'matrix@husky',
                     options: {
-                        el: '#container',
+                        el: '#matrix',
                         captions: {
                             all: 'Select all',
                             none: 'Select none',
@@ -65,20 +59,34 @@
                         values: {
                             vertical: ['sulu.assets.videos', 'sulu.assets.documents', 'sulu.assets.images'],
                             horizontal: [
-                                {value: 'value1', icon: 'plus'},
-                                {value: 'value2', icon: 'edit'},
-                                {value: 'value3', icon: 'search'},
-                                {value: 'value4', icon: 'times'},
-                                {value: 'value5', icon: 'gear'},
-                                {value: 'value6', icon: 'check'},
-                                {value: 'value7', icon: 'building'}
-                            ],
-                            titles: ['add', 'edit', 'search', 'remove', 'settings', 'circle-ok', 'building']
+                                [
+                                    {value: 'value1', icon: 'plus', title: 'add'},
+                                    {value: 'value2', icon: 'edit', title: 'edit'},
+                                    {value: 'value3', icon: 'search', title: 'search'},
+                                    {value: 'value4', icon: 'times', title: 'remove'},
+                                    {value: 'value5', icon: 'gear', title: 'settings'},
+                                    {value: 'value6', icon: 'check', title: 'circle-ok'},
+                                    {value: 'value7', icon: 'building', title: 'building'}
+                                ],
+                                [
+                                    {value: 'value2', icon: 'edit', title: 'edit'},
+                                    {value: 'value4', icon: 'times', title: 'remove'},
+                                    {value: 'value5', icon: 'gear', title: 'settings'},
+                                    {value: 'value7', icon: 'building', title: 'building'}
+                                ],
+                                [
+                                    {value: 'value1', icon: 'plus', title: 'add'},
+                                    {value: 'value2', icon: 'edit', title: 'edit'},
+                                    {value: 'value3', icon: 'search', title: 'search'},
+                                    {value: 'value4', icon: 'times', title: 'remove'},
+                                    {value: 'value5', icon: 'gear', title: 'settings'},
+                                ]
+                            ]
                         },
                         data: [
                             [true, false, true, false, false, false, false],
-                            [true, true, true, true, true, true, true],
-                            [false, true, true, false, true, false, true]
+                            [true, true, true, true],
+                            [false, true, true, false, true]
                         ]
                     }
                 }

diff --git a/dist/husky.css b/dist/husky.css
@@ -9486,29 +9486,29 @@ a.btn-black, a.btn-highlight {
 }
 /* line 22, ../scss/modules/matrix.scss */
 .table.matrix td.value {
-  width: 20px;
-  padding: 3px;
   margin: 0;
   border: none;
+  white-space: nowrap;
 }
-/* line 29, ../scss/modules/matrix.scss */
+/* line 28, ../scss/modules/matrix.scss */
 .table.matrix td.all {
   text-align: left;
   padding-left: 16px;
   color: #000;
 }
-/* line 34, ../scss/modules/matrix.scss */
+/* line 33, ../scss/modules/matrix.scss */
 .table.matrix td.section {
   color: #999;
 }
-/* line 39, ../scss/modules/matrix.scss */
+/* line 38, ../scss/modules/matrix.scss */
 .table.matrix .matrix-icon {
   border: 1px solid #000;
   color: #000;
   border-radius: 12px;
   width: 24px;
   height: 24px;
   line-height: 22px;
+  margin: 3px;
   display: inline-block;
   text-align: center;
 }