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 '_mixins'; |
||||
@import '_vars'; |
@import '_vars'; |
||||
|
|
||||
|
$sidebar-color: #fff; |
||||
|
|
||||
body { |
body { |
||||
overflow: hidden; |
background: $color-background; |
||||
background: $background; |
} |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 2rem; |
||||
} |
} |
||||
|
|
||||
.hidden { |
.hidden { |
||||
display: none; |
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; |
$color-background: #eff3f4; |
||||
$border: #eaeeef; |
$color-border: #eaeeef; |
||||
|
|
||||
$theme-blue: #438cef; |
$color-text: #373a3c; |
||||
$theme-blue-dark: #3f83df; |
|
||||
$theme-blue-light: #a1c6f7; |
|
||||
$theme-blue-lighter: #d9e8fc; |
|
||||
|
|
||||
$theme-green: #4cc159; |
$color-section-media: #ab6eee; |
||||
$theme-green-dark: #47b353; |
$color-section-settings: #ff5800; |
||||
|
$color-section-content: #07a6ff; |
||||
|
$color-section-schemas: #7c8d92; |
||||
|
$color-section-dashboard: #438cef; |
||||
|
|
||||
$theme-error: #f00; |
$color-theme-blue: #438cef; |
||||
$theme-error-dark: darken($theme-error, 5%); |
$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