diff options
Diffstat (limited to 'cds-ui')
3 files changed, 96 insertions, 12 deletions
diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json index 6b81a884a..1f63613ac 100644 --- a/cds-ui/designer-client/proxy.conf.json +++ b/cds-ui/designer-client/proxy.conf.json @@ -1,12 +1,14 @@ { "/controllerblueprint/*": { - "target": "https://localhost:3000", + "target": "localhost", + // "target": "https://41.128.168.198:3000", "secure": false, "logLevel": "debug", "changeOrigin": true }, "/resourcedictionary/*": { - "target": "https://localhost:3000", + "target": "localhost", + // "target": "https://41.128.168.198:3000", "secure": false, "logLevel": "debug", "changeOrigin": true 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%); +} |