tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Some new shortcuts and style improvements.

pull/65/head
Sebastian Stehle 9 years ago
parent
beb2a508bd
commit
2dd821d16e
15 changed files with 126 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/Squidex/Views/Account/Login.cshtml
  2. 2
      src/Squidex/Views/_Layout.cshtml
  3. 10
      src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
  4. 6
      src/Squidex/app/features/administration/pages/users/users-page.component.html
  5. 3
      src/Squidex/app/features/assets/pages/assets-page.component.html
  6. 6
      src/Squidex/app/features/content/pages/contents/contents-page.component.html
  7. 6
      src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
  8. 5
      src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
  9. 15
      src/Squidex/app/shell/pages/home/home-page.component.html
  10. 93
      src/Squidex/app/shell/pages/home/home-page.component.scss
  11. 18
      src/Squidex/app/theme/_bootstrap.scss
  12. 12
      src/Squidex/app/theme/_common.scss
  13. 12
      src/Squidex/app/theme/_mixins.scss
  14. 22
      src/Squidex/app/theme/_static.scss
  15. 8
      src/Squidex/app/theme/_vars.scss

5
src/Squidex/Views/Account/Login.cshtml
View File

@ -5,7 +5,8 @@
@{ @{
var type = Model.IsLogin ? "Login" : "Signup"; var type = Model.IsLogin ? "Login" : "Signup";
ViewBag.Theme = "white";
ViewBag.Title = type; ViewBag.Title = type;
} }
@ -44,7 +45,7 @@
<div class="form-group"> <div class="form-group">
<button class="btn btn-external btn-block btn btn-@schema" type="submit" name="provider" value="@provider.AuthenticationScheme"> <button class="btn btn-external btn-block btn btn-@schema" type="submit" name="provider" value="@provider.AuthenticationScheme">
<i class="icon-@schema"></i> @type with <strong>@provider.AuthenticationScheme</strong> <i class="icon-external icon-@schema"></i> @type with <strong>@provider.AuthenticationScheme</strong>
</button> </button>
</div> </div>
} }

2
src/Squidex/Views/_Layout.cshtml
View File

@ -17,7 +17,7 @@
@RenderSection("header") @RenderSection("header")
} }
</head> </head>
<body> <body class="@ViewBag.Theme">
@RenderBody() @RenderBody()
<environment names="Development"> <environment names="Development">

10
src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
View File

@ -7,15 +7,7 @@
} }
&-icon { &-icon {
& { @include build-icon($color-theme-error);
@include transition(color .3s ease);
cursor: pointer;
color: $color-theme-error;
}
&:hover {
color: darken($color-theme-error, 10%);
}
} }
} }

6
src/Squidex/app/features/administration/pages/users/users-page.component.html
View File

@ -9,12 +9,14 @@
</button> </button>
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
<sqx-shortcut keys="ctrl+shift+f" (trigger)="findInput.focus()"></sqx-shortcut>
<sqx-shortcut keys="ctrl+shift+g" (trigger)="newButton.click()"></sqx-shortcut>
<form class="form-inline" (ngSubmit)="search()"> <form class="form-inline" (ngSubmit)="search()">
<input class="form-control" [formControl]="usersFilter" placeholder="Search for user" /> <input class="form-control" #findInput [formControl]="usersFilter" placeholder="Search for user" />
</form> </form>
<button class="btn btn-success" routerLink="new"> <button class="btn btn-success" #newButton routerLink="new" title="New User (CTRL + M)">
<i class="icon-plus"></i> New <i class="icon-plus"></i> New
</button> </button>
</div> </div>

3
src/Squidex/app/features/assets/pages/assets-page.component.html
View File

@ -9,9 +9,10 @@
</button> </button>
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
<sqx-shortcut keys="ctrl+shift+f" (trigger)="findInput.focus()"></sqx-shortcut>
<form class="form-inline" (ngSubmit)="search()"> <form class="form-inline" (ngSubmit)="search()">
<input class="form-control" [formControl]="assetsFilter" placeholder="Search for assets" /> <input class="form-control" #findInput [formControl]="assetsFilter" placeholder="Search for assets" />
</form> </form>
</div> </div>

6
src/Squidex/app/features/content/pages/contents/contents-page.component.html
View File

@ -9,16 +9,18 @@
</button> </button>
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
<sqx-shortcut keys="ctrl+shift+f" (trigger)="findInput.focus()"></sqx-shortcut>
<sqx-shortcut keys="ctrl+shift+f" (trigger)="newButton.click()"></sqx-shortcut>
<form class="form-inline" (ngSubmit)="search()"> <form class="form-inline" (ngSubmit)="search()">
<input class="form-control" [formControl]="contentsFilter" placeholder="Search for content" /> <input class="form-control" #findInput [formControl]="contentsFilter" placeholder="Search for content" />
</form> </form>
<span *ngIf="languages.length > 1"> <span *ngIf="languages.length > 1">
<sqx-language-selector class="languages-buttons" (selectedLanguageChanged)="selectLanguage($event)" [languages]="languages"></sqx-language-selector> <sqx-language-selector class="languages-buttons" (selectedLanguageChanged)="selectLanguage($event)" [languages]="languages"></sqx-language-selector>
</span> </span>
<button class="btn btn-success" routerLink="new"> <button class="btn btn-success" #newButton routerLink="new">
<i class="icon-plus"></i> New <i class="icon-plus"></i> New
</button> </button>
</div> </div>

6
src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
View File

@ -10,9 +10,11 @@
<i class="icon-close"></i> <i class="icon-close"></i>
</a> </a>
<div class="panel-row"> <div class="panel-row">
<sqx-shortcut keys="ctrl+shift+f" (trigger)="findInput.focus()"></sqx-shortcut>
<div class="search-form"> <div class="search-form">
<input class="form-control form-control-dark" [formControl]="schemasFilter" placeholder="Search for schemas" /> <input class="form-control form-control-dark" #findInput [formControl]="schemasFilter" placeholder="Search for schemas" />
<i class="icon-search"></i> <i class="icon-search"></i>
</div> </div>

5
src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
View File

@ -11,12 +11,15 @@
</a> </a>
<div class="panel-header-row"> <div class="panel-header-row">
<sqx-shortcut keys="ctrl+shift+g" (trigger)="addSchemaDialog.show()"></sqx-shortcut>
<sqx-shortcut keys="ctrl+shift+f" (trigger)="findInput.focus()"></sqx-shortcut>
<button class="btn btn-success subheader-button" (click)="addSchemaDialog.show()"> <button class="btn btn-success subheader-button" (click)="addSchemaDialog.show()">
<i class="icon-plus"></i> <i class="icon-plus"></i>
</button> </button>
<div class="search-form"> <div class="search-form">
<input class="form-control form-control-dark" [formControl]="schemasFilter" placeholder="Search for schemas..." /> <input class="form-control form-control-dark" #findInput [formControl]="schemasFilter" placeholder="Search for schemas..." />
<i class="icon-search"></i> <i class="icon-search"></i>
</div> </div>

15
src/Squidex/app/shell/pages/home/home-page.component.html
View File

@ -4,7 +4,7 @@
<img class="login-icon" src="/images/logo-half.png" /> <img class="login-icon" src="/images/logo-half.png" />
<div> <div>
<button class="btn btn-primary login-button" (click)="login()"> <button class="btn btn-success btn-lg login-button" (click)="login()">
Login to Squidex Login to Squidex
</button> </button>
</div> </div>
@ -14,16 +14,11 @@
The login button will open a new popup. Once you are logged in successfull we will redirect you to the squidex management portal. The login button will open a new popup. Once you are logged in successfull we will redirect you to the squidex management portal.
</div> </div>
<div class="login-arms"></div>
</div> </div>
<div class="row"> <div class="proudly-made">
<div class="col"> Proudly made by Qaisar Ahmad &amp; Sebastian Stehle, 2016-2017
<div class="float-left">
<img class="logo" src="/images/logo-small.png" />
</div>
<div class="float-right proudly-made">
Proudly made by Qaisar Ahmad &amp; Sebastian Stehle, 2016-2017
</div>
</div>
</div> </div>
</div> </div>

93
src/Squidex/app/shell/pages/home/home-page.component.scss
View File

@ -3,69 +3,56 @@
$color-footer: #f7f8fa; $color-footer: #f7f8fa;
.card-footer { .card {
background: $color-footer; & {
padding-left: 5rem; position: relative;
padding-top: 1.5rem; }
padding-bottom: 1.5rem;
position: relative;
border-top: 0;
font-size: .8rem;
}
.card-block { &-block {
padding: 4rem 1rem; padding: 4rem 1rem 3rem;
} }
.icon-info { &-footer {
@include absolute(2rem, auto, auto, 2rem); background: $color-footer;
color: $color-text-decent; padding-left: 8rem;
font-weight: normal; padding-top: 1.5rem;
font-size: 1.4rem; padding-bottom: 1.5rem;
position: relative;
border-top: 0;
font-size: .8rem;
}
} }
.logo { .login-arms {
height: 1.4rem; @include absolute(auto, auto, -60px, -120px);
margin-top: 1rem; height: 200px;
margin-bottom: 1rem; width: 200px;
border: 0;
background: url('data:image/png;base64,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');
} }
.login { .login-area {
&-area { max-width: 30rem;
max-width: 40rem; margin: 1rem auto 0;
margin: 4rem auto 0; padding: 0 1rem;
padding: 0 1rem; }
}
&-button {
& {
@include border-radius(1.5rem);
cursor: pointer;
border: 0;
margin-top: 4rem;
height: 3rem;
padding-left: 1.4rem;
padding-right: 1.4rem;
text-transform: uppercase;
}
}
&-icon {
text-align: center;
}
&-button-text { .login-button {
vertical-align: middle; margin-top: 2rem;
} }
&-hint { .icon-info {
font-style: italic; @include absolute(2rem, auto, auto, 6rem);
} color: $color-text-decent;
font-weight: normal;
font-size: 1.4rem;
} }
.proudly-made { .proudly-made {
line-height: 3.4rem;
font-size: .8rem;
font-style: normal;
color: $color-text-decent; color: $color-text-decent;
line-height: 1.5rem;
text-align: center;
font-size: .9rem;
font-style: normal;
margin: 2rem 6rem;
} }

18
src/Squidex/app/theme/_bootstrap.scss
View File

@ -3,10 +3,6 @@
@import './../../node_modules/bootstrap/scss/mixins/_buttons'; @import './../../node_modules/bootstrap/scss/mixins/_buttons';
body {
background: $color-background;
}
.col-right { .col-right {
text-align: right; text-align: right;
} }
@ -168,6 +164,20 @@ body {
} }
} }
.icon {
&-github {
color: $color-extern-github-icon;
}
&-google {
color: $color-extern-google-icon;
}
&-microsoft {
color: $color-extern-microsoft-icon;
}
}
.btn { .btn {
&-github { &-github {
@include button-variant($color-dark-foreground, $color-extern-github, $color-extern-github); @include button-variant($color-dark-foreground, $color-extern-github, $color-extern-github);

12
src/Squidex/app/theme/_common.scss
View File

@ -2,9 +2,15 @@
@import '_vars'; @import '_vars';
body { body {
background: $color-background; & {
padding-top: $size-navbar-height; background: $color-background;
padding-left: 0; padding-top: $size-navbar-height;
padding-left: 0;
}
&.white {
background: $color-dark-foreground;
}
} }
h1 { h1 {

12
src/Squidex/app/theme/_mixins.scss
View File

@ -1,3 +1,15 @@
@mixin build-icon($color) {
& {
@include transition(color .3s ease);
color: $color;
}
&:hover,
&:focus {
color: darken($color, 10%);
}
}
@mixin clearfix() { @mixin clearfix() {
&::after { &::after {
content: ''; content: '';

22
src/Squidex/app/theme/_static.scss
View File

@ -87,14 +87,26 @@ noscript {
} }
} }
.icon-microsoft { .btn-external {
&::before { & {
color: $color-dark-foreground; text-align: left;
text-transform: none;
line-height: 1.8rem;
}
&:hover,
&:focus {
.icon-external {
color: $color-dark-foreground;
}
} }
} }
.btn-external { .icon-external {
text-align: left; margin-right: .5rem;
font-size: 1.3rem;
font-weight: normal;
vertical-align: middle;
} }
.form-group { .form-group {

8
src/Squidex/app/theme/_vars.scss
View File

@ -13,8 +13,12 @@ $color-input: #dbe4eb;
$color-disabled: #eef1f4; $color-disabled: #eef1f4;
$color-extern-google: #d34836; $color-extern-google: #d34836;
$color-extern-microsoft: #0063b1; $color-extern-google-icon: #b02c1b;
$color-extern-github: #3c4146; $color-extern-microsoft: #004185;
$color-extern-microsoft-icon: #1b67b7;
$color-extern-github: #191919;
$color-extern-github-icon: #4a4a4a;
$color-theme-blue: #438cef; $color-theme-blue: #438cef;
$color-theme-blue-dark: #3d7dd5; $color-theme-blue-dark: #3d7dd5;

Write Preview
Loading…
Cancel
Save