aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-08-27 21:38:23 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-08-27 21:39:47 +0200
commit65a445a2afd3ca2d1022d2e7c7fc71ec12698e87 (patch)
tree04135c98f044b58b9cb76c91ff061b2132ecbee8 /cds-ui/designer-client/src
parentd7fa7de25a494d9822827b4e22625d571260e966 (diff)
CDS Tour
Issue-ID: CCSDK-2705 Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com> Change-Id: I7968420980cfb0b20c76f66cd640fd9a655372ee
Diffstat (limited to 'cds-ui/designer-client/src')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html28
-rw-r--r--cds-ui/designer-client/src/styles.css74
2 files changed, 92 insertions, 10 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index 7928f2d91..a632568c8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -4,22 +4,32 @@
<div class="container-fluid main-container">
<app-packages-header></app-packages-header>
<div class="container-fluid body-container">
+ <!--Tour Starter-->
+ <input id="clicker" type="checkbox" />
+ <label for="clicker">Start the tour</label>
+
+ <div class="panel-wrap">
+ <div class="panel">
+ <button id="clicker1" type="button"><label for="clicker">Dismiss</label>
+ </button>
+ <h3>Welcome to CDS</h3>
+ <p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p>
+ <button type="button" class="btn" style="background-color: #fff;">Let's get started</button>
+ </div>
+ </div>
+ <!---->
<nav class="row">
<!--Nav Tabs-->
<div class="col pr-0">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
- role="tab" aria-controls="nav-home"
- aria-selected="true">All</a>
+ role="tab" aria-controls="nav-home" aria-selected="true">All</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
- role="tab" aria-controls="nav-profile"
- aria-selected="false">Deployed</a>
+ role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
- role="tab" aria-controls="nav-contact"
- aria-selected="false">Under Construction</a>
+ role="tab" aria-controls="nav-contact" aria-selected="false">Under Construction</a>
<a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
- role="tab" aria-controls="nav-contact1"
- aria-selected="false">Archived</a>
+ role="tab" aria-controls="nav-contact1" aria-selected="false">Archived</a>
</div>
</div>
<!--Nav Search & Filter-->
@@ -38,4 +48,4 @@
<app-sort-packages></app-sort-packages>
</div>
</div>
-</div>
+</div> \ No newline at end of file
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index d4f56c3b0..a482660a8 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -2404,12 +2404,50 @@ hr{
font-size: 11px;
color: #C3CDDB;
}
-.action-button.save{
+/* .action-button.save{
color: #1273EB !important;
}
.action-button.save:hover{
opacity: .9;
+} */
+
+
+.action-button.save{
+ color: #66BB00 !important;
+}
+/*Flash Glowing button style*/
+.action-button.save i{
+background-color: #66BB00;
+-webkit-animation: glowing 1500ms infinite;
+-moz-animation: glowing 1500ms infinite;
+-o-animation: glowing 1500ms infinite;
+animation: glowing 1500ms infinite;
}
+@-webkit-keyframes glowing {
+ 0% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
+ 50% { background-color: #7CD116; -webkit-box-shadow: 0 0 40px #7CD116; }
+ 100% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; }
+}
+
+@-moz-keyframes glowing {
+ 0% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
+ 50% { background-color: #7CD116; -moz-box-shadow: 0 0 40px #7CD116; }
+ 100% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; }
+}
+
+@-o-keyframes glowing {
+ 0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
+ 50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
+ 100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
+}
+
+@keyframes glowing {
+ 0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
+ 50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; }
+ 100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; }
+}
+
+
.action-button.delete i{
color: #BABBC3;
}
@@ -3246,6 +3284,40 @@ table.dataTable.no-footer{
+/* panel layout mechanics */
+.panel-wrap {
+ position: fixed;
+ top: 100px;
+ bottom: 0;
+ right: 0;
+ width: 300px;
+ height: 180px;
+ transform: translateX(100%);
+ transition: .3s ease-out;
+ z-index: 2000;
+}
+.panel {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: #333;
+ color: #eee;
+ overflow: auto;
+ padding: 1em;
+ font-size: 13px;
+}
+
+/* simulate panel state control --
+this can also be triggered by a
+class name added to the body tag.
+Just using a checkbox sibling here
+for simplicity
+*/
+[type="checkbox"]:checked ~ .panel-wrap {
+ transform: translateX(0%);
+}