mirror of https://github.com/Squidex/squidex.git
Sebastian
9 years ago
30 changed files with 522 additions and 71 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,10 @@ |
|||
<div class="layout-content"> |
|||
<div class="layout-content-left layout-content-left--no-button"> |
|||
<sqx-left-menu></sqx-left-menu> |
|||
</div> |
|||
<div class="layout-content-main"> |
|||
<h1> |
|||
<i class="layout-title-icon icon-dashboard"></i> Dashboard |
|||
</h1> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,6 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.layout-title-icon { |
|||
color: $color-section-dashboard; |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
<ul class="nav"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link nav-link--dashboard" routerLink="../dashboard" routerLinkActive="active"> |
|||
<i class="icon-dashboard"></i> Dashboard |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link nav-link--schemas" routerLink="../schemas" routerLinkActive="active"> |
|||
<i class="icon-schemas"></i> Schemas |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link nav-link--content"> |
|||
<i class="icon-content"></i> Content |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link nav-link--media"> |
|||
<i class="icon-media"></i> Media</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link nav-link--settings"> |
|||
<i class="icon-settings"></i> Settings |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
@ -0,0 +1,75 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
$color-selection-background: #ebf0f2; |
|||
|
|||
$color-border-left-width: 4px; |
|||
|
|||
@mixin build-item($color) { |
|||
&:hover, |
|||
&.active { |
|||
border-color: $color; |
|||
} |
|||
|
|||
& i { |
|||
color: $color; |
|||
} |
|||
} |
|||
|
|||
.nav { |
|||
& { |
|||
list-style: none; |
|||
padding: 0; |
|||
margin-top: 60px; |
|||
margin-left: -$padding-layout - 1px; |
|||
margin-right: -$padding-layout; |
|||
} |
|||
|
|||
&-link { |
|||
& { |
|||
@include transition(background .2s ease); |
|||
border-left: $color-border-left-width solid transparent; |
|||
color: $color-text; |
|||
cursor: pointer; |
|||
display: block; |
|||
font-size: 1rem; |
|||
font-weight: 450; |
|||
line-height: 3rem; |
|||
padding-left: $padding-layout - $color-border-left-width; |
|||
padding-right: $padding-layout; |
|||
} |
|||
|
|||
&.active { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
&:hover, |
|||
&.active { |
|||
background: $color-selection-background; |
|||
} |
|||
|
|||
&--media { |
|||
@include build-item($color-section-media); |
|||
} |
|||
|
|||
&--content { |
|||
@include build-item($color-section-content); |
|||
} |
|||
|
|||
&--dashboard { |
|||
@include build-item($color-section-dashboard); |
|||
} |
|||
|
|||
&--schemas { |
|||
@include build-item($color-section-schemas); |
|||
} |
|||
|
|||
&--settings { |
|||
@include build-item($color-section-settings); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import * as Ng2 from '@angular/core'; |
|||
|
|||
@Ng2.Component({ |
|||
selector: 'sqx-left-menu', |
|||
styles, |
|||
template |
|||
}) |
|||
export class LeftMenuComponent { } |
|||
@ -0,0 +1,12 @@ |
|||
<div class="layout-content"> |
|||
<div class="layout-content-left"> |
|||
<button class="layout-new-button btn btn-success">Create Schema</button> |
|||
|
|||
<sqx-left-menu></sqx-left-menu> |
|||
</div> |
|||
<div class="layout-content-main"> |
|||
<h1> |
|||
<i class="layout-title-icon icon-schemas"></i> Schemas |
|||
</h1> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,6 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.layout-title-icon { |
|||
color: $color-section-schemas; |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import * as Ng2 from '@angular/core'; |
|||
|
|||
import { AppsStoreService, TitleService } from 'shared'; |
|||
|
|||
@Ng2.Component({ |
|||
selector: 'sqx-schemas-page', |
|||
styles, |
|||
template |
|||
}) |
|||
export class SchemasPageComponent implements Ng2.OnInit { |
|||
private appSubscription: any | null = null; |
|||
|
|||
constructor( |
|||
private readonly titles: TitleService, |
|||
private readonly appsStore: AppsStoreService |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.appSubscription = |
|||
this.appsStore.selectedApp.subscribe(app => { |
|||
if (app) { |
|||
this.titles.setTitle('{appName} | Schemas', { appName: app.name }); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.appSubscription.unsubscribe(); |
|||
} |
|||
} |
|||
|
|||
@ -1,11 +1,62 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$sidebar-color: #fff; |
|||
|
|||
body { |
|||
overflow: hidden; |
|||
background: $background; |
|||
background: $color-background; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 2rem; |
|||
} |
|||
|
|||
.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
.layout { |
|||
&-title-icon { |
|||
margin-right: .6rem; |
|||
} |
|||
|
|||
&-new-button { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
&-content { |
|||
& { |
|||
@include fixed(54px, 0, 0, 0); |
|||
@include flex-box; |
|||
@include flex-flow(row); |
|||
} |
|||
|
|||
&-left, |
|||
&-right { |
|||
background: $sidebar-color; |
|||
padding: $padding-layout; |
|||
position: relative; |
|||
width: 220px; |
|||
} |
|||
|
|||
&-right { |
|||
border-left: 1px solid $color-border; |
|||
} |
|||
|
|||
&-left { |
|||
& { |
|||
border-right: 1px solid $color-border; |
|||
} |
|||
|
|||
&--no-button { |
|||
padding-top: $padding-layout + 38px; |
|||
} |
|||
} |
|||
|
|||
&-main { |
|||
@include flex-grow(1); |
|||
padding: $padding-layout; |
|||
} |
|||
} |
|||
} |
|||
@ -1,18 +1,28 @@ |
|||
$nav-text-color: #333; |
|||
$color-nav-text: #333; |
|||
|
|||
$background: #f4f8f9; |
|||
$border: #eaeeef; |
|||
$color-background: #eff3f4; |
|||
$color-border: #eaeeef; |
|||
|
|||
$theme-blue: #438cef; |
|||
$theme-blue-dark: #3f83df; |
|||
$theme-blue-light: #a1c6f7; |
|||
$theme-blue-lighter: #d9e8fc; |
|||
$color-text: #373a3c; |
|||
|
|||
$theme-green: #4cc159; |
|||
$theme-green-dark: #47b353; |
|||
$color-section-media: #ab6eee; |
|||
$color-section-settings: #ff5800; |
|||
$color-section-content: #07a6ff; |
|||
$color-section-schemas: #7c8d92; |
|||
$color-section-dashboard: #438cef; |
|||
|
|||
$theme-error: #f00; |
|||
$theme-error-dark: darken($theme-error, 5%); |
|||
$color-theme-blue: #438cef; |
|||
$color-theme-blue-dark: #3f83df; |
|||
$color-theme-blue-light: #a1c6f7; |
|||
$color-theme-blue-lighter: #d9e8fc; |
|||
|
|||
$accent-dark: #fff; |
|||
$color-theme-green: #4cc159; |
|||
$color-theme-green-dark: #47b353; |
|||
|
|||
$color-theme-error: #f00; |
|||
$color-theme-error-dark: darken($color-theme-error, 5%); |
|||
|
|||
$color-accent-dark: #fff; |
|||
|
|||
$padding-layout: 30px; |
|||
|
|||
|
|||
Loading…
Reference in new issue