Improve group appearance

TitouanRobert · Jun 14, 2017 · 16cceb3 · 16cceb3
1 parent f8a974a
commit 16cceb3
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 2 deletions.
diff --git a/R/mwUI_controls.R b/R/mwUI_controls.R
@@ -28,7 +28,7 @@ mwControlsUI <- function(controlList) {
         res <- tags$div(
           class="panel panel-default",
           tags$div(
-            class="panel-heading",
+            class="panel-heading collapsed",
             style = "cursor: pointer;",
             "data-toggle"="collapse",
             "data-target"=paste0("#panel-body-", id),

diff --git a/inst/manipulate_widget/manipulate_widget.css b/inst/manipulate_widget/manipulate_widget.css
@@ -223,3 +223,27 @@ html, body {
   border-top: solid 1px #4e9cff;
   border-bottom: solid 1px #4e9cff;
 }
+
+
+/* Group of inputs */
+.panel-default>.panel-heading {
+  background-color: #4e9cff;
+  color: white;
+}
+
+.panel-default>.panel-heading::before {
+  font-family: FontAwesome;
+  font-size: 20px;
+  content: "\f0d7";
+  display: inline-block;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+
+.panel-default>.panel-heading.collapsed::before {
+  content: "\f0da";
+}
+
+.panel-body {
+  padding: 5px;
+}
diff --git a/newUI/index.html b/newUI/index.html
@@ -76,7 +76,64 @@
           inputs chart 2
         </div>
         <div class="mw-inputs">
-          inputs chart 3
+          <div>
+            <div data-display-if="input.group2_visible">
+              <div class="panel panel-default">
+                <div class="panel-heading collapsed" style="cursor: pointer;" data-toggle="collapse" data-target="#panel-body-group2">group</div>
+                <div class="panel-body collapse" id="panel-body-group2">
+                  <div>
+                    <div data-display-if="input.x12_visible">
+                      <div class="form-group shiny-input-container" style="width: 100%;">
+                        <label for="x12">label1</label>
+                        <input id="x12" type="text" class="form-control" value="value1"/>
+                      </div>
+                    </div>
+                    <div data-display-if="input.x22_visible">
+                      <div class="form-group shiny-input-container" style="width: 100%;">
+                        <label class="control-label" for="x22">label2</label>
+                        <div>
+                          <select id="x22">
+                            <option value="1">1</option>
+                            <option value="2" selected>2</option>
+                            <option value="3">3</option>
+                          </select>
+                          <script type="application/json" data-for="x22" data-nonempty="">{}</script>
+                        </div>
+                      </div>
+                    </div>
+                    <div style="display:none">
+                      <div class="form-group shiny-input-container">
+                        <div class="checkbox">
+                          <label>
+                            <input id="x12_visible" type="checkbox" checked="checked"/>
+                            <span></span>
+                          </label>
+                        </div>
+                      </div>
+                      <div class="form-group shiny-input-container">
+                        <div class="checkbox">
+                          <label>
+                            <input id="x22_visible" type="checkbox" checked="checked"/>
+                            <span></span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div style="display:none">
+              <div class="form-group shiny-input-container">
+                <div class="checkbox">
+                  <label>
+                    <input id="group2_visible" type="checkbox" checked="checked"/>
+                    <span></span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 

diff --git a/newUI/manipulate_widget.css b/newUI/manipulate_widget.css
@@ -216,3 +216,22 @@ html, body {
 .mw-chart-selection {
   margin-bottom: 30px;
 }
+
+/* Group of inputs */
+.panel-default>.panel-heading {
+  background-color: #4e9cff;
+  color: white;
+}
+
+.panel-default>.panel-heading.collapsed::before {
+  content: "\f0da";
+}
+
+.panel-default>.panel-heading::before {
+  font-family: FontAwesome;
+  font-size: 20px;
+  content: "\f0d7";
+  display: inline-block;
+  padding-right: 10px;
+  vertical-align: middle;
+}