feat(layer-selector-ui): add a template to choice brick

An option to have an inline choice brick - label and options are on the same line. Related #9442
RAMP-PCAR · May 4, 2015 · 5b9f09e · 5b9f09e
1 parent 39de4bb
commit 5b9f09e
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git a/src/css/effects/brick-effects.less b/src/css/effects/brick-effects.less
@@ -154,7 +154,34 @@
     }
 }
 
+.button-brick-inline-container {
+    .button-brick-container;
+    margin: 0 0 10px 0;
+
+    .button-content {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        width: 100%;
+
+        span {
+            line-height: 31px;
+            //display: inline-block;
+        }
+
+        button {
+            //position: absolute;
+            //right: 0;
+            float: right;
+        }
+    }
+}
+
 .checkbox-brick-container {
+    .checkbox {
+        min-height: inherit;
+    }
+
     .checkbox-content {
         margin: 0;
 
@@ -296,6 +323,42 @@
     }
 }
 
+.choice-brick-inline-container {
+    .choice-brick-container;
+
+    .choice-group {
+
+        span {
+            //line-height: 31px;
+        }
+
+        button {
+            float: right;
+            font-size: 95%;
+            border: none !important;
+            box-shadow: none !important;
+            background-color: transparent !important;
+            color: @light-light-grey-color;
+
+            &.focused, &:focus, &:hover {
+                color: #fff !important;
+            }
+
+            &.button-pressed {
+                text-decoration: none;
+
+                .fa {
+                    display: inline-block;
+                }
+            }
+
+            .fa {
+                display: none;
+            }
+        }
+    }
+}
+
 .simpleinput-brick-container {
     .form-group {
 

diff --git a/src/css/effects/button-effects.less b/src/css/effects/button-effects.less
@@ -94,7 +94,7 @@
     &.focused,
     &:focus, &:hover {
         background-color: #D4D4D4 !important;
-        color: inherit !important;
+        color: #000 !important; //inherit !important;
 
         span {
             color: #000 !important;

diff --git a/src/js/RAMP/Utils/templates/bricks_template.json b/src/js/RAMP/Utils/templates/bricks_template.json
@@ -69,6 +69,15 @@
         </div>
     ",
 
+    "default_button_brick_inline_template": "
+
+        {% include('default_brick_notice_placeholder', o); %}
+        <div class='button-content'>
+            <span class=''>{%= o.header %}</span>
+            <button class='btn {%= o.buttonClass %}'>{%= o.label %}</button>
+        </div>
+    ",
+
     "default_choice_brick_template": "
 
         {% include('default_brick_header', o); %}
@@ -83,10 +92,31 @@
         </div>
     ",
 
+    "default_choice_brick_inline_template": "
+
+        {% include('default_brick_notice_placeholder', o); %}
+        <div class='btn-group choice-group'>
+            <span class=''>{%= o.header %}</span>
+
+            {%  
+                o.choices.forEach(function(choice) {
+                    include('default_choice_brick_inline_button_template', choice);
+                });
+            %}
+        </div>
+    ",
+
     "default_choice_brick_button_template": "
         <button class='btn btn-sm btn-default btn-choice' data-key='{%= o.key %}'>{%= o.value %}</button>
     ",
 
+    "default_choice_brick_inline_button_template": "
+        <button class='btn btn-xs button-none btn-choice' data-key='{%= o.key %}'>
+            <i class='fa fa-check on-left'></i>{%= o.value %}
+        </button>        
+    ",
+
+
     "default_checkbox_brick_template": "
 
         {% include('default_brick_header', o); %}