Added style to the setup and teardown triggers in web interface.

js/apps/system/_admin/aardvark/APP/frontend/js/templates/applicationDetailView.ejs

@@ -8,6 +8,19 @@
               <span class="icon_arangodb_settings2" title="Configure"></span>
             </a>
           </li>
+          <li id="app-scripts" class="enabled dropdown app-scripts">
+            <a class="headerButton">
+              <i class="fa fa-file-code-o"></i>
+            </a>
+            <ul class="script-dropdown-menu" id="scripts_dropdown">
+              <li class="dropdown-item">
+                <a id="app-setup" class="tab">Setup</a>
+              </li>
+              <li class="dropdown-item">
+                <a id="app-teardown" class="tab">Teardown</a>
+              </li>
+            </ul>
+          </li>
         </ul>
       </div>
       <div class="breadcrumb">
@@ -21,6 +34,7 @@
         </a>
       </div>
     </div>
+    <div></div>
     <section class="info">
       <div class="header">
         <div class="header-icon-container">
@@ -30,8 +44,6 @@
           <input type="button" class="open button-success" disabled="true" value="Open" />
           <input id="app-switch-mode" type="button" class="switch-mode button-warning" value="<%=app.get('development')?'Production':'Development'%>" />
           <input type="button" class="delete button-danger" value="Delete" <%=app.isSystem()?"disabled":""%> />
-          <input id="app-setup" type="button" class="" value="Setup"/>
-          <input id="app-teardown" type="button" class="" value="Teardown"/>
         </div>
         <div class="header_right">
           <h3>

js/apps/system/_admin/aardvark/APP/frontend/js/views/applicationDetailView.js

@@ -14,7 +14,12 @@
       'click #configure-app': 'showConfigureDialog',
       'click #app-switch-mode': 'toggleDevelopment',
       'click #app-setup': 'setup',
-      'click #app-teardown': 'teardown'
+      'click #app-teardown': 'teardown',
+      "click #app-scripts": "toggleScripts",
+    },
+
+    toggleScripts: function() {
+      $("#scripts_dropdown").toggle(200);
     },
 
     updateConfig: function() {

js/apps/system/_admin/aardvark/APP/frontend/scss/_buttons.scss

@@ -162,6 +162,12 @@ a.headerButton {
     font-weight: bold;
   }
 
+  .fa-file-code-o {
+    left: -2px;
+    position: relative;
+    top: -3px;
+  }
+
   &.activated {
     background-color: $c-positive-hover;
     color: $c-white;

js/apps/system/_admin/aardvark/APP/frontend/scss/_navbar.scss

@@ -127,6 +127,28 @@ ul.user-dropdown-menu {
   @extend %dropdown-menu;
 }
 
+ul.script-dropdown-menu {
+  @extend %dropdown-menu;
+
+  li.dropdown-item {
+    @extend %clickable;
+
+    margin-left: 0;
+
+    a {
+      display: block;
+
+      &:hover {
+        color: $c-white;
+      }
+    }
+
+    &:hover {
+      background-color: $c-positive;
+    }
+  }
+}
+
 ul.gv-dropdown-menu {
   @extend %dropdown-menu;
   @include border-radius(0);

js/apps/system/_admin/aardvark/APP/frontend/scss/generated.css

@@ -1837,7 +1837,7 @@ textarea,
 .fa-medium:before {
   content: ""; }
 
-ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, div.footer-center, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart .dashboard-large-chart-inner, .dashboard-small-chart .dashboard-small-chart-inner, .dashboard-medium-chart, .dashboard-tendency-container, .dashboard-bar-chart-container, .dashboard-large-chart, .dashboard-small-chart, .dashboard-sub-bar .dashboard-sub-bar-title, .dashboard-large-chart .dashboard-large-chart-inner .dashboard-interior-chart, .dashboard-small-chart .dashboard-small-chart-inner .dashboard-interior-chart, .dashboard-medium-chart .dashboard-interior-chart, .dashboard-tendency-container .dashboard-tendency-chart .dashboard-tendency, .dashboard-tendency-container .dashboard-tendency-chart .dashboard-tendency .dashboard-subtitle-bar, .dashboard-tendency-container .dashboard-tendency-chart .dashboard-tendency .dashboard-figure, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-title, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-title .percentage, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-title .absolut, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-chart, .dashboard-legend, .dashboard-sub-bar, .modal-chart-detail, .modal-chart-detail .modal-body, .modal-chart-detail .modal-dashboard-legend, .modal-chart-detail .modal-inner-detail, .dashboard-half-height-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboardModal, .pagination-line li a {
+ul.link-dropdown-menu, ul.user-dropdown-menu, ul.script-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, div.footer-center, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart .dashboard-large-chart-inner, .dashboard-small-chart .dashboard-small-chart-inner, .dashboard-medium-chart, .dashboard-tendency-container, .dashboard-bar-chart-container, .dashboard-large-chart, .dashboard-small-chart, .dashboard-sub-bar .dashboard-sub-bar-title, .dashboard-large-chart .dashboard-large-chart-inner .dashboard-interior-chart, .dashboard-small-chart .dashboard-small-chart-inner .dashboard-interior-chart, .dashboard-medium-chart .dashboard-interior-chart, .dashboard-tendency-container .dashboard-tendency-chart .dashboard-tendency, .dashboard-tendency-container .dashboard-tendency-chart .dashboard-tendency .dashboard-subtitle-bar, .dashboard-tendency-container .dashboard-tendency-chart .dashboard-tendency .dashboard-figure, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-title, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-title .percentage, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-title .absolut, .dashboard-bar-chart-container .dashboard-bar-chart .dashboard-bar-chart-chart, .dashboard-legend, .dashboard-sub-bar, .modal-chart-detail, .modal-chart-detail .modal-body, .modal-chart-detail .modal-dashboard-legend, .modal-chart-detail .modal-inner-detail, .dashboard-half-height-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboardModal, .pagination-line li a {
   float: left; }
 
 div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .dashboard-sub-bar-menu, .query-button, .arango-tab li, .show-save-state, div.gv_colour_list, .docsThirdCol {
@@ -1851,7 +1851,7 @@ div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonB
   height: 0;
   visibility: hidden; }
 
-.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox div.gv_action_button, .clusterDownBtn button, div .tile a span.icon, div .bigtile a span.icon, div .tile a svg, div .bigtile a svg, div .tile div.iconSet span, div .bigtile div.iconSet span, div .bigtile, .contentDiv .icon, .icon-info-sign, .arangoicon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .gv-search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li, .pagination-line li a, .link > line, .node, .edit-index-table .icon_arangodb_roundminus {
+ul.script-dropdown-menu li.dropdown-item, .addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox div.gv_action_button, .clusterDownBtn button, div .tile a span.icon, div .bigtile a span.icon, div .tile a svg, div .bigtile a svg, div .tile div.iconSet span, div .bigtile div.iconSet span, div .bigtile, .contentDiv .icon, .icon-info-sign, .arangoicon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .gv-search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li, .pagination-line li a, .link > line, .node, .edit-index-table .icon_arangodb_roundminus {
   cursor: pointer; }
 
 nav.navbar, footer.footer {
@@ -1929,7 +1929,7 @@ a.headerButton.disabled {
   a.headerButton.disabled:hover, a.headerButton.disabled:focus {
     color: #d3d3d3; }
 
-ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu {
+ul.link-dropdown-menu, ul.user-dropdown-menu, ul.script-dropdown-menu, ul.gv-dropdown-menu {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -1945,26 +1945,26 @@ ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu {
   right: 0;
   top: 80%;
   z-index: 1000; }
-  ul.link-dropdown-menu li, ul.user-dropdown-menu li, ul.gv-dropdown-menu li {
+  ul.link-dropdown-menu li, ul.user-dropdown-menu li, ul.script-dropdown-menu li, ul.gv-dropdown-menu li {
     line-height: 20px;
     white-space: nowrap;
     width: 100%; }
-  ul.link-dropdown-menu li.dropdown-header, ul.user-dropdown-menu li.dropdown-header, ul.gv-dropdown-menu li.dropdown-header {
+  ul.link-dropdown-menu li.dropdown-header, ul.user-dropdown-menu li.dropdown-header, ul.script-dropdown-menu li.dropdown-header, ul.gv-dropdown-menu li.dropdown-header {
     color: #999;
     font-size: 15px;
     font-weight: 600;
     font-variant: small-caps;
     padding: 0 15px; }
-  ul.link-dropdown-menu li.dropdown-header:hover, ul.user-dropdown-menu li.dropdown-header:hover, ul.gv-dropdown-menu li.dropdown-header:hover {
+  ul.link-dropdown-menu li.dropdown-header:hover, ul.user-dropdown-menu li.dropdown-header:hover, ul.script-dropdown-menu li.dropdown-header:hover, ul.gv-dropdown-menu li.dropdown-header:hover {
     cursor: default; }
-  ul.link-dropdown-menu li.divider, ul.user-dropdown-menu li.divider, ul.gv-dropdown-menu li.divider {
+  ul.link-dropdown-menu li.divider, ul.user-dropdown-menu li.divider, ul.script-dropdown-menu li.divider, ul.gv-dropdown-menu li.divider {
     background-color: #e5e5e5;
     height: 1px;
     margin: 10px 1px; }
-  ul.link-dropdown-menu a, ul.user-dropdown-menu a, ul.gv-dropdown-menu a {
+  ul.link-dropdown-menu a, ul.user-dropdown-menu a, ul.script-dropdown-menu a, ul.gv-dropdown-menu a {
     color: #333232;
     padding: 0 20px; }
-  ul.link-dropdown-menu:before, ul.user-dropdown-menu:before, ul.gv-dropdown-menu:before {
+  ul.link-dropdown-menu:before, ul.user-dropdown-menu:before, ul.script-dropdown-menu:before, ul.gv-dropdown-menu:before {
     position: absolute;
     border-width: 7px;
     border-style: solid;
@@ -1976,7 +1976,7 @@ ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu {
     position: absolute;
     right: 7px;
     top: -7px; }
-  ul.link-dropdown-menu:after, ul.user-dropdown-menu:after, ul.gv-dropdown-menu:after {
+  ul.link-dropdown-menu:after, ul.user-dropdown-menu:after, ul.script-dropdown-menu:after, ul.gv-dropdown-menu:after {
     position: absolute;
     border-width: 7px;
     border-style: solid;
@@ -2057,6 +2057,15 @@ a.tab {
   a.tab.userImg {
     padding-bottom: 5px; }
 
+ul.script-dropdown-menu li.dropdown-item {
+  margin-left: 0; }
+  ul.script-dropdown-menu li.dropdown-item a {
+    display: block; }
+    ul.script-dropdown-menu li.dropdown-item a:hover {
+      color: #fff; }
+  ul.script-dropdown-menu li.dropdown-item:hover {
+    background-color: #8aa051; }
+
 ul.gv-dropdown-menu {
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
@@ -2237,6 +2246,10 @@ a.headerButton {
   a.headerButton .icon_arangodb_arrowleft,
   a.headerButton .icon_arangodb_arrowright {
     font-weight: bold; }
+  a.headerButton .fa-file-code-o {
+    left: -2px;
+    position: relative;
+    top: -3px; }
   a.headerButton.activated {
     background-color: #788f3d;
     color: #fff; }

js/apps/system/_admin/aardvark/APP/test/specs/views/applicationDetailViewSpec.js

@@ -378,7 +378,7 @@
         opts.success();
       });
       view.render();
-      expect($(button).val()).toEqual("Setup");
+      expect($(button).text()).toEqual("Setup");
       $(button).click();
       expect(appDummy.setup).toHaveBeenCalledWith(jasmine.any(Function));
     });
@@ -390,7 +390,7 @@
         opts.success();
       });
       view.render();
-      expect($(button).val()).toEqual("Teardown");
+      expect($(button).text()).toEqual("Teardown");
       $(button).click();
       expect(appDummy.teardown).toHaveBeenCalledWith(jasmine.any(Function));
     });