Merge lp:~james-page/horizon/theme-resync into lp:~openstack-ubuntu-testing/horizon/grizzly

[James Page]

Fixup ubuntu theme for release.

=== modified file 'debian/changelog'
--- debian/changelog	2013-04-10 17:24:27 +0000
+++ debian/changelog	2013-04-22 13:12:31 +0000
@@ -1,3 +1,10 @@
+horizon (1:2013.1-0ubuntu3) raring; urgency=low
+
+  * Re-sync Ubuntu theme with upstream changes, fixing instance network
+    selection dialog and network topology screens (LP: #1157918).
+
+ -- James Page <[e-mail]>  Mon, 22 Apr 2013 14:09:04 +0100
+
 horizon (1:2013.1-0ubuntu2) raring; urgency=low
 
   * Recompress static JS and CSS and generate new manifest.json for

=== modified file 'debian/theme/css/ubuntu.css'
--- debian/theme/css/ubuntu.css	2012-10-09 18:04:20 +0000
+++ debian/theme/css/ubuntu.css	2013-04-22 13:12:31 +0000
@@ -5056,6 +5056,443 @@
   margin-right: 2px;
 }
 
+/* Styling for draged network object */
+#networkListSortContainer {
+  display: none;
+}
+.networklist {
+  padding: 6px;
+  background: #eee;
+  border: 1px solid #ccc;
+  min-height: 2em;
+  width: auto !important;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.networklist li {
+  width: 226px;
+  list-style-type: none;
+  margin: 6px auto;
+  padding: 3px;
+  background: #fff;
+  border: 1px solid #aaa;
+  line-height: 18px;
+  border-radius: 3px;
+  cursor: move;
+  padding-left: 23px;
+  background: #ffffff url(/static/dashboard/img/drag.png) no-repeat 11px 50%;
+}
+.networklist li em {
+  font-size: 0.5em;
+  line-height: 1em;
+  color: #999;
+  font-style: normal;
+  margin-left: 0.8em;
+}
+.networklist li i {
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.networklist li a.btn {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  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;
+}
+.networklist li a.btn:before {
+  content: "+";
+}
+.networklist li.ui-sortable-helper {
+  background-color: #def;
+}
+.networklist li.ui-state-highlight {
+  border: 1px dotted #ccc;
+  background: #efefef;
+  height: 0.5em;
+}
+.networklist 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;
+}
+#selected_network li {
+  position: relative;
+}
+#selected_network li a.btn:before {
+  content: "-";
+}
+#selected_network li:before {
+  content: "nic:" counter(v1);
+  counter-increment: v1;
+  display: inline-block;
+  margin-right: 5px;
+  background: #666;
+  color: #fff;
+  font-size: 90%;
+  padding: 0px 4px;
+  vertical-align: middle;
+  border-radius: 2px;
+  position: absolute;
+  left: -2em;
+}
+#selected_network.dragging li:before {
+  content: "nic:";
+  background-color: rgba(102, 102, 102, 0.5);
+  padding-right: 10px;
+}
+#selected_network.dragging li.ui-state-highlight:before {
+  content: "";
+  background: transparent;
+}
+/* Styling for network topology */
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 20px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-moz-keyframes progress-bar-stripes {
+  from {
+    background-position: 20px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-ms-keyframes progress-bar-stripes {
+  from {
+    background-position: 20px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-o-keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 20px 0;
+  }
+}
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 20px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+#topologyCanvas {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 500px;
+  padding: 25px;
+  padding-left: 50px;
+  background: #efefef;
+}
+#topologyCanvas div.nodata {
+  font-size: 150%;
+  font-weight: bold;
+  text-align: center;
+  padding-top: 200px;
+  display: none;
+}
+div.networks {
+  height: 100%;
+}
+div.network {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  float: left;
+  width: 270px;
+  height: 100%;
+  position: relative;
+}
+div.network .nicname {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 100%;
+  width: 17px;
+  border-radius: 17px;
+  z-index: 200;
+  color: #fff;
+  position: absolute;
+  left: -8px;
+  top: 0px;
+  cursor: pointer;
+}
+div.network .nicname:hover {
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+  background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+  background-size: 10px 10px;
+}
+div.network .nicname.nourl {
+  cursor: auto;
+}
+div.network .nicname.nourl:hover {
+  background-image: none;
+}
+div.network .nicname h3 {
+  font-size: 12px;
+  line-height: 1;
+  position: relative;
+  font-weight: normal;
+  top: 55%;
+  color: #fff;
+  left: -1px;
+  letter-spacing: 0.2em;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  white-space: nowrap;
+  text-shadow: 0px 0px 5px #000;
+}
+div.network .nicname span.ip {
+  position: absolute;
+  bottom: -10px;
+  left: 20px;
+  color: #000;
+  display: block;
+  font-weight: normal;
+  font-size: 90%;
+  letter-spacing: 0.2em;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  -webkit-transform-origin: 0% 0%;
+  -moz-transform-origin: 0% 0%;
+  -ms-transform-origin: 0% 0%;
+  -o-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
+  white-space: nowrap;
+  text-shadow: 0px 0px 2px #fff,0px 0px 2px #fff;
+}
+div.network .router,
+div.network .server,
+div.network .device {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  width: 90px;
+  border: 3px solid #444;
+  position: absolute;
+  top: 30px;
+  left: 90px;
+  color: #fff;
+  padding: 0 3px;
+  background: #666;
+  margin-bottom: 20px;
+  border-radius: 8px;
+}
+div.network .router:before,
+div.network .server:before,
+div.network .device:before {
+  content: "";
+  width: 20px;
+  height: 20px;
+  border: 2px solid #444;
+  line-height: 1.2;
+  position: absolute;
+  border-radius: 20px;
+  top: -10px;
+  left: -10px;
+  background: #ffffff url(/static/dashboard/img/router.png) no-repeat center center;
+  background-size: 16px 16px;
+}
+div.network .router:after,
+div.network .server:after,
+div.network .device:after {
+  content: "";
+  width: 100%;
+  line-height: 1.2;
+  position: absolute;
+  text-align: center;
+  border-radius: 0;
+  background: #444;
+  color: #fff;
+  font-size: 11px;
+  height: 1.5em;
+  bottom: 0px;
+  left: 0px;
+}
+div.network .router span.devicename,
+div.network .server span.devicename,
+div.network .device span.devicename {
+  position: absolute;
+  color: #fff;
+  bottom: 0px;
+  font-size: 12px;
+  line-height: 14px;
+  width: 100%;
+  text-align: center;
+  z-index: 300;
+  left: -2px;
+}
+div.network .router span.name,
+div.network .server span.name,
+div.network .device span.name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  font-size: 12px;
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  top: 4px;
+  padding: 0 3px;
+}
+div.network .router div.port,
+div.network .server div.port,
+div.network .device div.port {
+  text-align: right;
+  min-width: 90px;
+  height: 10px;
+  font: 0px/0px sans-serif;
+  position: absolute;
+  left: -91px;
+  top: 8px;
+  background-color: #37a9e3;
+  background-image: none;
+  -webkit-background-size: 20px 20px;
+  -moz-background-size: 20px 20px;
+  -o-background-size: 20px 20px;
+  background-size: 20px 20px;
+  z-index: 100;
+}
+div.network .router div.port span.ip,
+div.network .server div.port span.ip,
+div.network .device div.port span.ip {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #333;
+  font-size: 9px;
+  line-height: 1;
+  text-shadow: 0px -1px #ffffff;
+  position: relative;
+  top: -1em;
+  width: 90px;
+  display: inline-block;
+  padding-right: 8px;
+  padding-left: 8px;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+div.network .router div.port.right,
+div.network .server div.port.right,
+div.network .device div.port.right {
+  left: auto;
+  right: -92px;
+  width: 92px;
+  text-align: left;
+}
+div.network .router:hover,
+div.network .server:hover,
+div.network .device:hover {
+  border-color: #222;
+}
+div.network .router:hover div.port,
+div.network .server:hover div.port,
+div.network .device:hover div.port {
+  cursor: pointer;
+  background-color: #2688c0;
+  -webkit-animation: progress-bar-stripes 1s linear infinite;
+  -moz-animation: progress-bar-stripes 1s linear infinite;
+  -ms-animation: progress-bar-stripes 1s linear infinite;
+  -o-animation: progress-bar-stripes 1s linear infinite;
+  animation: progress-bar-stripes 1s linear infinite;
+}
+div.network .router:hover div.port:hover,
+div.network .server:hover div.port:hover,
+div.network .device:hover div.port:hover {
+  -webkit-animation: progress-bar-stripes 0.3s linear infinite;
+  -moz-animation: progress-bar-stripes 0.3s linear infinite;
+  -ms-animation: progress-bar-stripes 0.3s linear infinite;
+  -o-animation: progress-bar-stripes 0.3s linear infinite;
+  animation: progress-bar-stripes 0.3s linear infinite;
+}
+div.network .router:hover div.port.nourl,
+div.network .server:hover div.port.nourl,
+div.network .device:hover div.port.nourl {
+  cursor: auto;
+  background-image: none;
+}
+div.network .router:hover div.port.nourl:hover,
+div.network .server:hover div.port.nourl:hover,
+div.network .device:hover div.port.nourl:hover {
+  background-image: none;
+}
+div.network .router:hover:after,
+div.network .server:hover:after,
+div.network .device:hover:after {
+  background-color: #222;
+  border-color: #222;
+}
+div.network .device {
+  border: none;
+  background: transparent;
+}
+div.network .server {
+  background: #fff;
+  color: #333;
+}
+div.network .server:before {
+  background: #ffffff url(/static/dashboard/img/server.png) no-repeat center center;
+  background-size: 14px 14px;
+}
+.launchButtons {
+  text-align: right;
+  margin: 10px 0px 15px 10px;
+}
+.launchButtons a.btn {
+  margin-left: 10px;
+}
+
+
 /* Graham Bancroft [e-mail] 03 October 2012 */
 @import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,400italic");