refactor(client): move assets folder into app and remove rdash-ui dep (#3883)

* refactor(assets): use rdash css

* chore(build): remove rdash dep

* refactor(client): move assets folder into app

app/__module.js

@@ -1,4 +1,4 @@
-import '../assets/css/app.css';
+import './assets/css';
 import angular from 'angular';
 
 import './agent/_module';

app/assets/css/index.js

@@ -0,0 +1,2 @@
+import './rdash.css';
+import './app.css';

app/assets/css/rdash.css

@@ -0,0 +1,486 @@
+#content-wrapper {
+  padding-left: 0;
+  margin-left: 0;
+  width: 100%;
+  height: auto;
+}
+@media only screen and (min-width: 561px) {
+  #page-wrapper.open {
+    padding-left: 250px;
+  }
+}
+@media only screen and (max-width: 560px) {
+  #page-wrapper.open {
+    padding-left: 70px;
+  }
+}
+#page-wrapper.open #sidebar-wrapper {
+  left: 150px;
+}
+
+/**
+ * Hamburg Menu
+ * When the class of 'hamburg' is applied to the body tag of the document, 
+ * the sidebar changes it's style to attempt to mimic a menu on a phone app,
+ * where the content is overlaying the content, rather than push it.
+ */
+@media only screen and (max-width: 560px) {
+  body.hamburg #page-wrapper {
+    padding-left: 0;
+  }
+  body.hamburg #page-wrapper:not(.open) #sidebar-wrapper {
+    position: absolute;
+    left: -100px;
+  }
+  body.hamburg #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator {
+    display: none;
+  }
+  body.hamburg #page-wrapper.open #sidebar-wrapper {
+    position: fixed;
+  }
+  body.hamburg #page-wrapper.open #sidebar-wrapper ul.sidebar li.sidebar-main {
+    margin-left: 0px;
+  }
+  body.hamburg #sidebar-wrapper ul.sidebar li.sidebar-main,
+  body.hamburg .row.header .meta {
+    margin-left: 70px;
+  }
+  body.hamburg #sidebar-wrapper ul.sidebar li.sidebar-main,
+  body.hamburg #page-wrapper.open #sidebar-wrapper ul.sidebar li.sidebar-main {
+    transition: margin-left 0.4s ease 0s;
+  }
+}
+
+/**
+ * Header
+ */
+.row.header {
+  height: 60px;
+  background: #fff;
+  margin-bottom: 15px;
+}
+.row.header > div:last-child {
+  padding-right: 0;
+}
+.row.header .meta .page {
+  font-size: 17px;
+  padding-top: 11px;
+}
+.row.header .meta .breadcrumb-links {
+  font-size: 10px;
+}
+.row.header .meta div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.row.header .login a {
+  padding: 18px;
+  display: block;
+}
+.row.header .user {
+  min-width: 130px;
+}
+.row.header .user > .item {
+  width: 65px;
+  height: 60px;
+  float: right;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+}
+.row.header .user > .item a {
+  color: #919191;
+  display: block;
+}
+.row.header .user > .item i {
+  font-size: 20px;
+  line-height: 55px;
+}
+.row.header .user > .item img {
+  width: 40px;
+  height: 40px;
+  margin-top: 10px;
+  border-radius: 2px;
+}
+.row.header .user > .item ul.dropdown-menu {
+  border-radius: 2px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
+}
+.row.header .user > .item ul.dropdown-menu .dropdown-header {
+  text-align: center;
+}
+.row.header .user > .item ul.dropdown-menu li.link {
+  text-align: left;
+}
+.row.header .user > .item ul.dropdown-menu li.link a {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+.row.header .user > .item ul.dropdown-menu:before {
+  position: absolute;
+  top: -7px;
+  right: 23px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid rgba(0, 0, 0, 0.2);
+  border-left: 7px solid transparent;
+  content: '';
+}
+.row.header .user > .item ul.dropdown-menu:after {
+  position: absolute;
+  top: -6px;
+  right: 24px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+.loading {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin: 100px auto;
+}
+.double-bounce1,
+.double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: bounce 2s infinite ease-in-out;
+  animation: bounce 2s infinite ease-in-out;
+}
+.double-bounce2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+@-webkit-keyframes bounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes bounce {
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+
+/* Fonts */
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../fonts/montserrat-regular-webfont.eot');
+  src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-regular-webfont.woff') format('woff'),
+    url('../fonts/montserrat-regular-webfont.ttf') format('truetype'), url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  @font-face {
+    font-family: 'Montserrat';
+    src: url('../fonts/montserrat-regular-webfont.svg') format('svg');
+  }
+  select {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+}
+/* Base */
+html {
+  overflow-y: scroll;
+}
+body {
+  background: #f3f3f3;
+  font-family: 'Montserrat';
+  color: #333333 !important;
+}
+.row {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+.row > div {
+  margin-bottom: 15px;
+}
+.alerts-container .alert:last-child {
+  margin-bottom: 0;
+}
+#page-wrapper {
+  padding-left: 70px;
+  height: 100%;
+}
+#sidebar-wrapper {
+  margin-left: -150px;
+  left: -30px;
+  width: 250px;
+  position: fixed;
+  height: 100%;
+  z-index: 999;
+}
+#page-wrapper,
+#sidebar-wrapper {
+  transition: all 0.4s ease 0s;
+}
+.green {
+  background: #23ae89 !important;
+}
+.blue {
+  background: #2361ae !important;
+}
+.orange {
+  background: #d3a938 !important;
+}
+.red {
+  background: #ae2323 !important;
+}
+.form-group .help-block.form-group-inline-message {
+  padding-top: 5px;
+}
+div.input-mask {
+  padding-top: 7px;
+}
+
+/* #592727 RED */
+/* #2f5927 GREEN */
+/* #30426a BLUE (default)*/
+/* Sidebar background color */
+/* Sidebar header and footer color */
+/* Sidebar title text colour */
+/* Sidebar menu item hover color */
+/**
+ * Sidebar
+ */
+#sidebar-wrapper {
+  background: #30426a;
+}
+ul.sidebar .sidebar-main a,
+.sidebar-footer,
+ul.sidebar .sidebar-list a:hover,
+#page-wrapper:not(.open) ul.sidebar .sidebar-title.separator {
+  /* Sidebar header and footer color */
+  background: #2d3e63;
+}
+ul.sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-indent: 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+ul.sidebar li a {
+  color: #fff;
+  display: block;
+  float: left;
+  text-decoration: none;
+  width: 250px;
+}
+ul.sidebar .sidebar-main {
+  height: 65px;
+}
+ul.sidebar .sidebar-main a {
+  font-size: 18px;
+  line-height: 60px;
+}
+ul.sidebar .sidebar-main a:hover {
+  cursor: pointer;
+}
+ul.sidebar .sidebar-main .menu-icon {
+  float: right;
+  font-size: 18px;
+  padding-right: 28px;
+  line-height: 60px;
+}
+ul.sidebar .sidebar-title {
+  color: #738bc0;
+  font-size: 12px;
+  height: 35px;
+  line-height: 40px;
+  text-transform: uppercase;
+  transition: all 0.6s ease 0s;
+}
+ul.sidebar .sidebar-list {
+  height: 40px;
+}
+ul.sidebar .sidebar-list a {
+  text-indent: 25px;
+  font-size: 15px;
+  color: #b2bfdc;
+  line-height: 40px;
+}
+ul.sidebar .sidebar-list a:hover {
+  color: #fff;
+  border-left: 3px solid #e99d1a;
+  text-indent: 22px;
+}
+ul.sidebar .sidebar-list a:hover .menu-icon {
+  text-indent: 25px;
+}
+ul.sidebar .sidebar-list .menu-icon {
+  float: right;
+  padding-right: 29px;
+  line-height: 40px;
+  width: 70px;
+}
+#page-wrapper:not(.open) ul.sidebar {
+  bottom: 0;
+}
+#page-wrapper:not(.open) ul.sidebar .sidebar-title {
+  display: none;
+  height: 0px;
+  text-indent: -100px;
+}
+#page-wrapper:not(.open) ul.sidebar .sidebar-title.separator {
+  display: block;
+  height: 2px;
+  margin: 13px 0;
+}
+#page-wrapper:not(.open) ul.sidebar .sidebar-list a:hover span {
+  border-left: 3px solid #e99d1a;
+  text-indent: 22px;
+}
+#page-wrapper:not(.open) .sidebar-footer {
+  display: none;
+}
+.sidebar-footer {
+  position: absolute;
+  height: 40px;
+  bottom: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  transition: all 0.6s ease 0s;
+  text-align: center;
+}
+.sidebar-footer div a {
+  color: #b2bfdc;
+  font-size: 12px;
+  line-height: 43px;
+}
+.sidebar-footer div a:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+/* #592727 RED */
+/* #2f5927 GREEN */
+/* #30426a BLUE (default)*/
+/* Sidebar background color */
+/* Sidebar header and footer color */
+/* Sidebar title text colour */
+/* Sidebar menu item hover color */
+
+/**
+ * Widgets
+ */
+.widget {
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  background: #ffffff;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  border-color: #e9e9e9;
+}
+.widget .widget-header .pagination,
+.widget .widget-footer .pagination {
+  margin: 0;
+}
+.widget .widget-header {
+  color: #767676;
+  background-color: #f6f6f6;
+  padding: 10px 15px;
+  border-bottom: 1px solid #e9e9e9;
+  line-height: 30px;
+}
+.widget .widget-header i {
+  margin-right: 5px;
+}
+.widget .widget-body {
+  padding: 20px;
+}
+.widget .widget-body table thead {
+  background: #fafafa;
+}
+.widget .widget-body table thead * {
+  font-size: 14px !important;
+}
+.widget .widget-body table tbody * {
+  font-size: 13px !important;
+}
+.widget .widget-body .error {
+  color: #ff0000;
+}
+.widget .widget-body button {
+  margin-left: 5px;
+}
+.widget .widget-body div.alert {
+  margin-bottom: 10px;
+}
+.widget .widget-body.large {
+  height: 350px;
+  overflow-y: auto;
+}
+.widget .widget-body.medium {
+  height: 250px;
+  overflow-y: auto;
+}
+.widget .widget-body.small {
+  height: 150px;
+  overflow-y: auto;
+}
+.widget .widget-body.no-padding {
+  padding: 0;
+}
+.widget .widget-body.no-padding .error,
+.widget .widget-body.no-padding .message {
+  padding: 20px;
+}
+.widget .widget-footer {
+  border-top: 1px solid #e9e9e9;
+  padding: 10px;
+}
+.widget .widget-icon {
+  background: #30426a;
+  width: 65px;
+  height: 65px;
+  border-radius: 50%;
+  text-align: center;
+  vertical-align: middle;
+  margin-right: 15px;
+}
+.widget .widget-icon i {
+  line-height: 66px;
+  color: #ffffff;
+  font-size: 30px;
+}
+.widget .widget-footer {
+  border-top: 1px solid #e9e9e9;
+  padding: 10px;
+}
+.widget .widget-title .pagination,
+.widget .widget-footer .pagination {
+  margin: 0;
+}
+.widget .widget-content .title {
+  font-size: 28px;
+  display: block;
+}

app/index.html

@@ -12,12 +12,12 @@
     <![endif]-->
 
     <!-- Fav and touch icons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="${require('../assets/ico/apple-touch-icon.png')}" />
-    <link rel="icon" type="image/png" sizes="32x32" href="${require('../assets/ico/favicon-32x32.png')}" />
-    <link rel="icon" type="image/png" sizes="16x16" href="${require('../assets/ico/favicon-16x16.png')}" />
-    <link rel="mask-icon" href="${require('../assets/ico/safari-pinned-tab.svg')}" color="#5bbad5" />
-    <link rel="shortcut icon" href="${require('../assets/ico/favicon.ico')}" />
-    <meta name="msapplication-config" content="${require('../assets/ico/browserconfig.xml')}" />
+    <link rel="apple-touch-icon" sizes="180x180" href="${require('./assets/ico/apple-touch-icon.png')}" />
+    <link rel="icon" type="image/png" sizes="32x32" href="${require('./assets/ico/favicon-32x32.png')}" />
+    <link rel="icon" type="image/png" sizes="16x16" href="${require('./assets/ico/favicon-16x16.png')}" />
+    <link rel="mask-icon" href="${require('./assets/ico/safari-pinned-tab.svg')}" color="#5bbad5" />
+    <link rel="shortcut icon" href="${require('./assets/ico/favicon.ico')}" />
+    <meta name="msapplication-config" content="${require('./assets/ico/browserconfig.xml')}" />
     <meta name="theme-color" content="#ffffff" />
   </head>
 
@@ -41,7 +41,7 @@
                 <!-- loading box logo -->
                 <div class="row">
                   <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo" />
-                  <img ng-if="!logo" src="${require('../assets/images/logo_alt.png')}" class="simple-box-logo" alt="Portainer" />
+                  <img ng-if="!logo" src="${require('./assets/images/logo_alt.png')}" class="simple-box-logo" alt="Portainer" />
                 </div>
                 <!-- !loading box logo -->
                 <!-- panel -->

app/portainer/components/endpoint-list/endpoint-item/endpointItem.html

@@ -2,7 +2,7 @@
   <div class="blocklist-item-box">
     <span class="blocklist-item-logo endpoint-item">
       <i ng-if="$ctrl.model.Type !== 4" ng-class="$ctrl.model.Type | endpointtypeicon" class="fa-4x blue-icon" aria-hidden="true"></i>
-      <img ng-if="$ctrl.model.Type === 4" src="../../../../../assets/images/edge_endpoint.png" />
+      <img ng-if="$ctrl.model.Type === 4" src="~@/assets/images/edge_endpoint.png" />
     </span>
 
     <span class="col-sm-12">

app/portainer/components/product-list/product-item/productItem.html

@@ -3,8 +3,8 @@
   <div class="blocklist-item-box">
     <!-- extension-image -->
     <span class="blocklist-item-logo">
-      <img class="blocklist-item-logo" ng-if="$ctrl.model.Id == 1 || $ctrl.model.Id == 2 || $ctrl.model.Id == 3" src="../../../../../assets/images/support_1.png" />
-      <img class="blocklist-item-logo" ng-if="$ctrl.model.Id == 4 || $ctrl.model.Id == 5" src="../../../../../assets/images/support_2.png" />
+      <img class="blocklist-item-logo" ng-if="$ctrl.model.Id == 1 || $ctrl.model.Id == 2 || $ctrl.model.Id == 3" src="~@/assets/images/support_1.png" />
+      <img class="blocklist-item-logo" ng-if="$ctrl.model.Id == 4 || $ctrl.model.Id == 5" src="~@/assets/images/support_2.png" />
     </span>
     <!-- !extension-image -->
     <!-- extension-details -->

app/portainer/views/auth/auth.html

@@ -4,7 +4,7 @@
     <div class="col-sm-6 col-sm-offset-3">
       <!-- login box logo -->
       <div class="row">
-        <img ng-if="!ctrl.logo" src="../../../../assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer" />
+        <img ng-if="!ctrl.logo" src="~@/assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer" />
         <img ng-if="ctrl.logo" ng-src="{{ ctrl.logo }}" class="simple-box-logo" />
       </div>
       <!-- !login box logo -->

app/portainer/views/init/admin/initAdmin.html

@@ -5,7 +5,7 @@
       <!-- simple box logo -->
       <div class="row">
         <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo" />
-        <img ng-if="!logo" src="../../../../../assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer" />
+        <img ng-if="!logo" src="~@/assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer" />
       </div>
       <!-- !simple box logo -->
       <!-- init password panel -->

app/portainer/views/init/endpoint/initEndpoint.html

@@ -5,7 +5,7 @@
       <!-- simple box logo -->
       <div class="row">
         <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo" />
-        <img ng-if="!logo" src="../../../../../assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer" />
+        <img ng-if="!logo" src="~@/assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer" />
       </div>
       <!-- !simple box logo -->
       <!-- init-endpoint panel -->

app/portainer/views/sidebar/sidebar.html

@@ -3,7 +3,7 @@
   <div class="sidebar-header">
     <a ui-sref="portainer.home">
       <img ng-if="logo" ng-src="{{ logo }}" class="img-responsive logo" />
-      <img ng-if="!logo" src="../../../../assets/images/logo.png" class="img-responsive logo" alt="Portainer" />
+      <img ng-if="!logo" src="~@/assets/images/logo.png" class="img-responsive logo" alt="Portainer" />
     </a>
     <a ng-click="toggleSidebar()"><span class="menu-icon glyphicon glyphicon-transfer"></span></a>
   </div>
@@ -208,7 +208,7 @@
         </a>
       </div>
       <div>
-        <img src="../../../../assets/images/logo_small.png" class="img-responsive logo" alt="Portainer" />
+        <img src="~@/assets/images/logo_small.png" class="img-responsive logo" alt="Portainer" />
         <span class="version">{{ uiVersion }}</span>
       </div>
     </div>

app/vendors.js

@@ -10,7 +10,6 @@ import 'codemirror/lib/codemirror.css';
 import 'codemirror/addon/lint/lint.css';
 import 'angular-json-tree/dist/angular-json-tree.css';
 import 'angular-loading-bar/build/loading-bar.css';
-import 'rdash-ui/dist/css/rdash.css';
 import 'angular-moment-picker/dist/angular-moment-picker.min.css';
 import 'angular-multiselect/isteven-multi-select.css';
 

package.json

@@ -80,7 +80,6 @@
     "lodash-es": "^4.17.15",
     "moment": "^2.21.0",
     "ng-file-upload": "~12.2.13",
-    "rdash-ui": "1.0.*",
     "splitargs": "github:deviantony/splitargs#semver:~0.2.0",
     "toastr": "github:CodeSeven/toastr#semver:~2.1.3",
     "ui-select": "^0.19.8",

webpack/webpack.common.js

@@ -115,6 +115,7 @@ module.exports = {
       Docker: path.resolve(projectRoot, 'app/docker'),
       Extensions: path.resolve(projectRoot, 'app/extensions'),
       Portainer: path.resolve(projectRoot, 'app/portainer'),
+      '@': path.resolve(projectRoot, 'app'),
     },
   },
 };