SCSS refactor for shared sort list UI

Closes-bug: #1435910

Change-Id: I9fe73aa226bb6f253183ecdffa7d38e35c3664f3

openstack_dashboard/dashboards/project/firewalls/templates/firewalls/_update_routers.html

@@ -1,12 +1,12 @@
 {% load i18n %}
 
 <noscript><h3>{{ step }}</h3></noscript>
-<div id="routerListSortContainer">
+<div id="routerListSortContainer" class="sort-container">
   <div class="col-sm-6">
     <h4 id="selected_router_label">{% trans "Selected Routers" %}</h4>
-    <ul id="selected_router" class="routerlist"></ul>
+    <ul id="selected_router" class="routerlist box-list"></ul>
     <h4>{% trans "Available Routers" %}</h4>
-    <ul id="available_router" class="routerlist"></ul>
+    <ul id="available_router" class="routerlist box-list"></ul>
   </div>
   <div class="col-sm-6">
     {% include "project/firewalls/_update_router_help.html" %}

openstack_dashboard/dashboards/project/firewalls/templates/firewalls/_update_rules.html

@@ -1,12 +1,12 @@
 {% load i18n %}
 
 <noscript><h3>{{ step }}</h3></noscript>
-<div id="ruleListSortContainer">
+<div id="ruleListSortContainer" class="sort-container">
   <div class="col-sm-6">
     <h4 id="selected_rule_label">{% trans "Selected Rules" %}</h4>
-    <ul id="selected_rule" class="rulelist"></ul>
+    <ul id="selected_rule" class="rulelist box-list"></ul>
     <h4>{% trans "Available Rules" %}</h4>
-    <ul id="available_rule" class="rulelist"></ul>
+    <ul id="available_rule" class="rulelist box-list"></ul>
   </div>
   <div class="col-sm-6">
     {% include "project/firewalls/_update_rule_help.html" %}

openstack_dashboard/dashboards/project/instances/templates/instances/_update_networks.html

@@ -1,12 +1,12 @@
 {% load i18n %}
 
 <noscript><h3>{{ step }}</h3></noscript>
-<div id="networkListSortContainer">
+<div id="networkListSortContainer" class="sort-container">
   <div class="col-sm-6">
     <label id="selected_network_label">{% trans "Selected networks" %}</label>
-    <ul id="selected_network" class="networklist"></ul>
+    <ul id="selected_network" class="networklist box-list"></ul>
     <label>{% trans "Available networks" %}</label>
-    <ul id="available_network" class="networklist"></ul>
+    <ul id="available_network" class="networklist box-list"></ul>
   </div>
   <div class="col-sm-6">
     {% include "project/instances/_launch_network_help.html" %}

openstack_dashboard/static/dashboard/scss/_debt.scss

@@ -21,111 +21,6 @@ ul {
   margin-bottom: 0.5em;
 }
 
-/* Styling for draged network object */
-#networkListSortContainer {
-  display: none;
-}
-.networklist {
-  padding: 6px;
-  background: #eee;
-  border: 1px solid $border-color;
-  min-height: 2em;
-  width: auto !important;
-  @include box-sizing(border-box);
-  li {
-    width: 80%;
-    list-style-type: none;
-    margin: 6px auto;
-    padding: 3px;
-    background: $body-bg;
-    border: 1px solid #aaa;
-    line-height: 18px;
-    border-radius: 3px;
-    cursor: move;
-    padding-left: 23px;
-    background: $body-bg url(../img/drag.png) no-repeat 11px 50%;
-    em {
-      font-size: 0.5em;
-      line-height: 1em;
-      color:#999;
-      font-style: normal;
-      margin-left: 0.8em;
-    }
-    i {
-      margin-right: 5px;
-      vertical-align: middle;
-    }
-    a.btn {
-      @include box-sizing(border-box);
-      font-size: 11px;
-      line-height: 12px;
-      padding: 2px 5px 3px;
-      margin-right: 1px;
-      width: 18px;
-      text-align: center;
-      right:5px;
-      vertical-align: middle;
-      float: right;
-      &:before {
-        content: "+";
-      }
-    }
-  }
-  li.ui-sortable-helper {
-    background-color: #def;
-  }
-  li.ui-state-highlight {
-    border: 1px dotted $gray-light;
-    background: #efefef;
-    height: 0.5em;
-  }
-  li:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-}
-#selected_network {
-  margin-bottom: 1.5em;
-  counter-reset:v1 0;
-  background: #edf9ff;
-  border:1px solid #c0d9e4;
-  li {
-    position: relative;
-    a.btn:before {
-      content: "-";
-    }
-  }
-  li:before {
-    content:"NIC:"counter(v1);
-    counter-increment:v1;
-    display: inline-block;
-    margin-right: 5px;
-    background: $gray;
-    color: $body-bg;
-    font-size: 90%;
-    padding: 0px 4px;
-    vertical-align: middle;
-    border-radius: 2px;
-    position: absolute;
-    left: -2em;
-  }
-  &.dragging {
-    li:before {
-      content:"NIC:";
-      background-color:rgba(102,102,102,0.5);
-      padding-right: 10px;
-    }
-    li.ui-state-highlight:before {
-      content:"";
-      background:transparent;
-    }
-  }
-}
-
 iframe {
   border: none;
 }

openstack_dashboard/static/dashboard/scss/components/_resource_topology.scss

@@ -79,245 +79,136 @@
   }
 }
 
-/* Styling for draged firewall rule object */
-#ruleListSortContainer {
-  display: none;
-}
 
-.rulelist {
+/* Shared sort list UI in use by Instances and Firewall policies */
-  padding: 6px;
-  background: #eee;
-  border: 1px solid $border-color;
-  min-height: 2em;
-  width: auto !important;
-  @include box-sizing(border-box);
 
-  li {
+@mixin common_box_list_selected($text) {
-    width: 226px;
-    list-style-type: none;
-    margin: 6px auto;
-    padding: 3px;
-    background: $body-bg;
-    border: 1px solid $border-color;
-    line-height: 18px;
-    border-radius: 3px;
-    cursor: move;
-    padding-left: 23px;
-    background: $body-bg url(../img/drag.png) no-repeat 11px 50%;
-
-    em {
-      font-size: 0.5em;
-      line-height: 1em;
-      color:#999;
-      font-style: normal;
-      margin-left: 0.8em;
-    }
-
-    i {
-      margin-right: 5px;
-      vertical-align: middle;
-    }
-
-    a.btn {
-      @include box-sizing(border-box);
-      font-size: 11px;
-      line-height: 12px;
-      padding: 2px 5px 3px;
-      margin-right: 1px;
-      width: 18px;
-      text-align: center;
-      //position: absolute;
-      right:5px;
-      vertical-align: middle;
-      float: right;
-      &:before {
-        content: "+";
-      }
-    }
-  }
-
-  li.ui-sortable-helper {
-    background-color: #def;
-  }
-
-  li.ui-state-highlight {
-    border: 1px dotted $border-color;
-    background: #efefef;
-    height: 0.5em;
-  }
-
-  li:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-}
-
-#selected_rule {
   margin-bottom: 1.5em;
   counter-reset:v1 0;
   background: #edf9ff;
-  border:1px solid $border-color;
+  border:1px solid #c0d9e4;
-
-  li {
-    position: relative;
-    a.btn {
-      &:before {
-        content: "-";
-      }
-    }
-  }
-
-  li:before {
-    content:"rule:"counter(v1);
-    counter-increment:v1;
-    display: inline-block;
-    margin-right: 5px;
-    background: $gray;
-    color:$body-bg;
-    font-size: 90%;
-    padding: 0px 4px;
-    vertical-align: middle;
-    border-radius: 2px;
-    position: absolute;
-    left: -2em;
-  }
-
-  &.dragging {
-    li:before {
-      content:"rule:";
-      background-color:rgba(102,102,102,0.5);
-      padding-right: 10px;
-    }
-
-    li.ui-state-highlight:before {
-      content:"";
-      background:transparent;
-    }
-  }
-}
-
-/* Styling for draged firewall router object */
-#routerListSortContainer {
-  display: none;
-}
-
-.routerlist {
-  padding: 6px;
-  background: #eee;
-  border: 1px solid $border-color;
-  min-height: 2em;
-  width: auto !important;
-  @include box-sizing(border-box);
-
-  li {
-    width: 226px;
-    list-style-type: none;
-    margin: 6px auto;
-    padding: 3px;
-    background: $body-bg;
-    border: 1px solid $border-color;
-    line-height: 18px;
-    border-radius: 3px;
-    cursor: move;
-    padding-left: 23px;
-    background: $body-bg url(../img/drag.png) no-repeat 11px 50%;
-
-    em {
-      font-size: 0.5em;
-      line-height: 1em;
-      color:#999;
-      font-style: normal;
-      margin-left: 0.8em;
-    }
-
-    i {
-      margin-right: 5px;
-      vertical-align: middle;
-    }
-
-    a.btn {
-      @include box-sizing(border-box);
-      font-size: 11px;
-      line-height: 12px;
-      padding: 2px 5px 3px;
-      margin-right: 1px;
-      width: 18px;
-      text-align: center;
-      //position: absolute;
-      right:5px;
-      vertical-align: middle;
-      float: right;
-      &:before {
-        content: "+";
-      }
-    }
-  }
-
-  li.ui-sortable-helper {
-    background-color: #def;
-  }
-
-  li.ui-state-highlight {
-    border: 1px dotted $border-color;
-    background: #efefef;
-    height: 0.5em;
-  }
-
-  li:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-}
-
-#selected_router {
-  margin-bottom: 1.5em;
-  counter-reset:v1 0;
-  background: #edf9ff;
-  border:1px solid $border-color;
 
   li {
     position: relative;
 
-    a.btn {
+    a.btn:before {
+      content: "-";
+    }
+
+    &:before {
+      content:$text":"counter(v1);
+      counter-increment:v1;
+      display: inline-block;
+      margin-right: 5px;
+      background: $gray;
+      color: $body-bg;
+      font-size: 90%;
+      padding: 0 4px;
+      vertical-align: middle;
+      border-radius: 2px;
+      position: absolute;
+      left: -2em;
+    }
+  }
+
+  &.dragging {
+    li {
       &:before {
-        content: "-";
+        content:$text":";
+        background-color:rgba(102,102,102,0.5);
+        padding-right: 10px;
+      }
+
+      &.ui-state-highlight:before {
+        content:"";
+        background:transparent;
+      }
+    }
+  }
+}
+
+.sort-container {
+  display: none;
+
+  .box-list, .box-list-selected {
+    padding: 6px;
+    background: #eee;
+    border: 1px solid $border-color;
+    min-height: 2em;
+    width: auto !important;
+    @include box-sizing(border-box);
+
+    li {
+      width: 226px;
+      list-style-type: none;
+      margin: 6px auto;
+      padding: 3px;
+      background: $body-bg;
+      border: 1px solid $border-color;
+      line-height: 18px;
+      border-radius: 3px;
+      cursor: move;
+      padding-left: 23px;
+      background: $body-bg url("../img/drag.png") no-repeat 11px 50%;
+
+      em {
+        font-size: 0.5em;
+        line-height: 1em;
+        color:#999;
+        font-style: normal;
+        margin-left: 0.8em;
+      }
+
+      i {
+        margin-right: 5px;
+        vertical-align: middle;
+      }
+
+      a.btn {
+        @include box-sizing(border-box);
+        font-size: 11px;
+        line-height: 12px;
+        padding: 2px 5px 3px;
+        margin-right: 1px;
+        width: 18px;
+        text-align: center;
+        right:5px;
+        vertical-align: middle;
+        float: right;
+
+        &:before {
+          content: "+";
+        }
+      }
+
+      &.ui-sortable-helper {
+        background-color: #def;
+      }
+
+      &.ui-state-highlight {
+        border: 1px dotted $border-color;
+        background: #efefef;
+        height: 0.5em;
+      }
+
+      &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
       }
     }
   }
 
-  li:before {
+  #selected_network {
-    content:"router:"counter(v1);
+    @include common_box_list_selected("NIC");
-    counter-increment:v1;
-    display: inline-block;
-    margin-right: 5px;
-    background: $gray;
-    color:$body-bg;
-    font-size: 90%;
-    padding: 0px 4px;
-    vertical-align: middle;
-    border-radius: 2px;
-    position: absolute;
-    left: -2em;
   }
-
+  #selected_rule {
-  &.dragging {
+    @include common_box_list_selected("rule");
-    li:before {
+  }
-      content:"router:";
+  #selected_router {
-      background-color:rgba(102,102,102,0.5);
+    @include common_box_list_selected("router");
-      padding-right: 10px;
-    }
-
-    li.ui-state-highlight:before {
-      content:"";
-      background:transparent;
-    }
   }
 }