Merge pull request #37 from arnaugiralt/feat/LITE-28149-port-cdialog

LITE-28149: port cDialog
cloudblue · Jul 20, 2023 · a2f8f09 · a2f8f09
2 parents 9a7347a + aa1fb50
commit a2f8f09
Show file tree

Hide file tree

Showing 21 changed files with 1,953 additions and 279 deletions.
diff --git a/connect_ext_ppr/static/deployment-details.272e874bc9496204df16.js b/connect_ext_ppr/static/deployment-details.272e874bc9496204df16.js
diff --git a/connect_ext_ppr/static/deployment-details.css b/connect_ext_ppr/static/deployment-details.css
diff --git a/connect_ext_ppr/static/deployment-details.fd79f0eb4033ee6594f2.js b/connect_ext_ppr/static/deployment-details.fd79f0eb4033ee6594f2.js
diff --git a/...ppr/static/index.0d3dd9a3b3207aeb0dae.css → ...ppr/static/index.5c5477c3e81eb95e1456.css b/...ppr/static/index.0d3dd9a3b3207aeb0dae.css → ...ppr/static/index.5c5477c3e81eb95e1456.css
@@ -1684,7 +1684,6 @@ i font::first-letter {
 }
 html,
 body {
-  height: 100%;
   overflow-y: auto;
   overflow-x: auto;
   margin: 0;

diff --git a/..._ppr/static/index.8c80d20d7477ccc20d0c.js → ..._ppr/static/index.f0239835f73a360467d7.js b/..._ppr/static/index.8c80d20d7477ccc20d0c.js → ..._ppr/static/index.f0239835f73a360467d7.js
diff --git a/connect_ext_ppr/static/index.html b/connect_ext_ppr/static/index.html
@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.7e5afe9e4e5d6999e52c.js"></script><script defer src="index.8c80d20d7477ccc20d0c.js"></script><link href="index.0d3dd9a3b3207aeb0dae.css" rel="stylesheet"></head>
+<script defer src="vendors.c37f1993399243c8d2a4.js"></script><script defer src="index.f0239835f73a360467d7.js"></script><link href="index.5c5477c3e81eb95e1456.css" rel="stylesheet"></head>
 
 <body>
     <div id="app"></div>

diff --git a/.../static/settings.464cc3b352ceb58aad51.css → .../static/settings.228c534170f31239141d.css b/.../static/settings.464cc3b352ceb58aad51.css → .../static/settings.228c534170f31239141d.css
@@ -180,7 +180,6 @@ i font::first-letter {
 }
 html,
 body {
-  height: 100%;
   overflow-y: auto;
   overflow-x: auto;
   margin: 0;

diff --git a/connect_ext_ppr/static/settings.html b/connect_ext_ppr/static/settings.html
@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Settings</title>
-<script defer src="vendors.7e5afe9e4e5d6999e52c.js"></script><script defer src="settings.4553496e587cf62b3d76.js"></script><link href="settings.464cc3b352ceb58aad51.css" rel="stylesheet"></head>
+<script defer src="vendors.c37f1993399243c8d2a4.js"></script><script defer src="settings.4553496e587cf62b3d76.js"></script><link href="settings.228c534170f31239141d.css" rel="stylesheet"></head>
 
 <body>
     <div id="loader"></div>

diff --git a/...pr/static/vendors.7e5afe9e4e5d6999e52c.js → ...pr/static/vendors.c37f1993399243c8d2a4.js b/...pr/static/vendors.7e5afe9e4e5d6999e52c.js → ...pr/static/vendors.c37f1993399243c8d2a4.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "css-minimizer-webpack-plugin": "^4.2.2",
     "moment-timezone": "^0.5.43",
     "portal-vue": "^2.1.7",
-    "ramda": "^0.28.0",
+    "ramda": "^0.29.0",
     "vue": "^2.7.14",
     "vue-clipboard2": "^0.3.3",
     "vue-input-facade": "^2.0.1",

diff --git a/ui/src/components/cAlert.vue b/ui/src/components/cAlert.vue
@@ -0,0 +1,206 @@
+<template lang="pug">
+.c-alert-holder
+  .c-alert(:class="classSettings",)
+    .c-alert__icon
+      c-icon(:icon="icon")
+
+    .c-alert__text
+      slot(name="message") {{ message }}
+
+    .c-alert__actions(v-if="this.$slots.actions",)
+      slot(name="actions")
+
+</template>
+
+<script>
+import {
+  googleInfoBaseline,
+} from '@cloudblueconnect/material-svg/baseline';
+
+import {
+  flip,
+  includes,
+} from 'ramda';
+
+
+import cIcon from '~components/cIcon.vue';
+
+
+import {
+  isString,
+  pathTo,
+} from '~utils';
+
+
+const typeAlert = [
+  'info',
+  'error',
+  'success',
+  'warning',
+  'default',
+];
+
+export default {
+  components: {
+    cIcon,
+  },
+
+  props: {
+    message: String,
+
+    icon: {
+      type: Object,
+      default: () => (googleInfoBaseline),
+    },
+
+    dense: Boolean,
+
+    alignTop: Boolean,
+
+    fluid: Boolean,
+
+    grid: Boolean,
+
+    type: {
+      type: String,
+      validator: flip(includes)(typeAlert),
+      default: 'default',
+    },
+  },
+
+  computed: {
+    classSettings() {
+      return {
+        'c-alert_align-top': this.alignTop,
+        'c-alert_fluid': this.fluid,
+        'c-alert_dense': this.dense,
+        'c-alert_grid': this.grid,
+        [`c-alert_${this.type}`]: true,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+@import '~styles/common.styl';
+
+.c-alert {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+
+  min-height: 64px;
+  min-width: 240px;
+  max-width: 600px;
+  padding: 16px;
+  border-radius: 2px;
+
+  background-color: rgba(#bdbdbd, 0.15);
+
+  color: #bdbdbd;
+}
+
+.c-alert_align-top {
+  align-items: flex-start;
+}
+
+.c-alert_dense {
+  min-height: 56px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.c-alert_fluid {
+  display: flex;
+  max-width: none;
+}
+
+// NOTE: this should go later than .c-alert_fluid to work properly !
+.c-alert_grid {
+  display: grid;
+  grid-template-columns: 32px auto;
+  grid-template-rows: auto;
+  grid-template-areas: "icon text" "x actions";
+}
+
+.c-alert_error {
+  background-color: rgba(#FF6A6A, 0.2);
+  color: #FF6A6A;
+}
+.c-alert_info {
+  background-color: _rgba(var(--theme_accent_rgb), 0.15);
+  color: var(--theme_accent);
+}
+.c-alert_success {
+  background-color: rgba(#0bb071, 0.15);
+  color: #0bb071;
+}
+.c-alert_warning {
+  background-color: rgba(#F2C94C, 0.15);
+  color: #F2C94C;
+}
+
+.c-alert__icon {
+  flex: 0 0 auto;
+  margin-right: 12px;
+  display: flex;
+
+  > .c-icon,
+  > .v-icon {
+    color: currentColor;
+  }
+
+  .c-alert_align-top & {
+    margin-top: -2px;
+  }
+
+  .c-alert_grid & {
+    grid-area: icon;
+  }
+}
+
+.c-alert__text {
+  flex: 1 1 auto;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  color: #212121;
+
+  &:first-letter {
+    text-transform: uppercase;
+  }
+
+  .c-alert_grid & {
+    grid-area: text;
+  }
+}
+
+.c-alert__actions {
+  flex: 0 0 auto;
+  margin-right: -4px;
+  margin-left: 24px;
+
+  button {
+    margin: -2px 0;
+
+    & + & {
+      margin-left: 16px;
+    }
+  }
+
+  .c-alert_dense & {
+    margin-right: -8px;
+
+    button {
+      margin-top: -4px;
+      margin-bottom: -4px;
+    }
+  }
+
+  .c-alert_grid & {
+    grid-area: actions;
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/ui/src/components/cButton.vue b/ui/src/components/cButton.vue
@@ -205,7 +205,7 @@ export default {
       iconRight: isNotNilOrEmpty,
     }),
 
-    isSolidBtn: propEq('mode', cButtonModesDict.solid),
+    isSolidBtn: propEq(cButtonModesDict.solid, 'mode'),
 
     initialBtnColor: cond([
       [prop('color'), pathTo(['color'], hexColor)],