mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-07-06 09:48:46 +00:00
Code Issues Releases Wiki Activity

Consistent colors for webide buttons

Browse Source
This commit is contained in:
Gabor PEK 2018-03-08 16:16:55 +01:00
parent 62052b8383
commit d11564e58b
4 changed files with 119 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/dashboard/dashboard.component.scss
View File

@ -141,6 +141,7 @@ $tao-navbar-height: 67px;
.tao-grid-main-components {
overflow-y: hidden;
display: grid;
padding-top: $tao-navbar-height;
width: 100vw;

56
src/app/webide/webide.component.html
View File

@ -1,13 +1,34 @@
<div class="btn-group btn-group-sm flex-wrap">
<button *ngFor="let file of files"
class="btn tao-tab-btn"
(click)="tabSwitchButtonHandler(file)"
[class.active]="filename === file"
[class.disabled]="filename === file"
[disabled]="filename === file"
[class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
{{file}}
</button>
<div class="tao-grid-container">
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
<button *ngFor="let file of files"
class="btn tao-tab-btn"
(click)="tabSwitchButtonHandler(file)"
[class.active]="filename === file"
[class.disabled]="filename === file"
[disabled]="filename === file"
[class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
{{file}}
</button>
</div>
<div class="btn-group-sm tao-deploy-btn-group">
<button type="submit"
class="btn tao-deploy-btn tao-grid-top-center"
(click)="sendCodeIfDirty(); deployCode()"
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
[class.deployed]="deployButtonState === 'DEPLOYED'"
[class.deploy]="deployButtonState === 'DEPLOYING'"
[class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
[class.failed]="deployButtonState === 'FAILED'"
>
<span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
<span *ngIf="deployButtonState === 'DEPLOYED'">
<img src="images/greentick_icon.svg"/>
<span>Deployed</span>
</span>
<span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
<span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button>
</div>
</div>
<div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()"
@ -18,18 +39,3 @@
class="tfw-ace-editor"
>
</div>
<div class="btn-group flex-wrap">
<button type="submit"
class="btn btn-secondary"
(click)="sendCodeIfDirty(); deployCode()"
[disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
[class.btn-success]="deployButtonState === 'DEPLOYED'"
[class.btn-info]="deployButtonState === 'DEPLOYING'"
[class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
[class.btn-danger]="deployButtonState === 'FAILED'"
><span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
<span *ngIf="deployButtonState === 'DEPLOYED'">Deploy</span>
<span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
<span *ngIf="deployButtonState === 'FAILED'">Deployment failed</span></button>
</div>

123
src/app/webide/webide.component.scss
View File

@ -1,3 +1,21 @@
//
// Spaces
//
$space: 24px;
$sxlarge: 9 * $space;
$xxxlarge: 6 * $space;
$xxlarge: 4 * $space;
$xlarge: 2 * $space;
$large: 1.5 * $space;
$medium: $space;
$small: 0.75 * $space;
$tiny: 0.5 * $space;
$hair: 0.25 * $space;
$nano: 0.125 * $space;
// Tao blue palette
$tao-blue-50: #F2F7FE;
$tao-blue-100: #C9DFFA;
@ -118,54 +136,85 @@ $tao-gray-700: #232323;
$tao-gray-800: #0C0C0C;
$tao-gray-900: #000000;
.tao-grid-container {
display: grid;
grid-template-columns: 8fr 1fr;
}
.tfw-ace-editor {
min-height: 85vh;
height: 80%;
height: 100%;
width: 100%;
overflow: auto;
}
.btn-group {
padding-left: 34px;
margin: 6px auto;
}
.tao-tab-btn {
border-radius: 100px;
padding: 6px 19px;
z-index: 200;
}
.tao-tab-btn-saved {
background-color: white;
border: 1px solid $tao-plum-900;
background: white !important;
border-left: 0;
border-right: 0;
border-radius: 100px;
padding: 5px 19px;
z-index: 200;
.tao-tab-btn-saved,
.active,
.disabled,
&:disabled {
background-color: $tao-bright-green-100;
color: black;
}
}
.active {
background-color: white !important;
color: $tao-gray-900;
.tao-deploy-btn-group {
margin: $small;
.tao-deploy-btn {
background: $tao-bright-green-200;
border-radius: 100px;
padding: 6px 19px;
img {
position: relative;
bottom: 1px;
height: $small;
}
&.failed {
background-color: $tao-red-500;
color:white;
}
&:disabled,
.disabled,
.deployed,
.deploying
{
background-color: $tao-bright-green-100;
color: black;
}
.loader {
border: 2px solid #ffffff;
border-radius: 50%;
border-top: 2px solid $tao-bright-green-100;
width: 15px;
height: 15px;
animation: spin 2s linear infinite;
display: inline-block;
margin-right: 5px;
position: relative;
top: 2px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
}
.disabled {
background: white !important;
color: $tao-gray-900;
}
.loader {
border: 2px solid #ffffff;
border-radius: 50%;
border-top: 2px solid #212529;
width: 15px;
height: 15px;
animation: spin 2s linear infinite;
display: inline-block;
margin-right: 5px;
position: relative;
top: 2px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

1
src/assets/images/greentick_icon.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Réteg_1" data-name="Réteg 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12.2"><defs><style>.cls-1{fill:none;stroke:#4fc3a8;stroke-linecap:round;stroke-miterlimit:10;}</style></defs><title>greentick_icon_smalll</title><line class="cls-1" x1="3.47" y1="6.58" x2="4.94" y2="8.45"/><line class="cls-1" x1="4.99" y1="8.44" x2="8.53" y2="4.18"/><ellipse class="cls-1" cx="6" cy="6.1" rx="5.5" ry="5.6"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 422 B