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

Asset styling changed.

pull/308/head
Sebastian 8 years ago
parent
dc3ddaad75
commit
8c741d587c
4 changed files with 136 additions and 117 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. 4
      src/Squidex/app/features/content/shared/assets-editor.component.scss
  2. 79
      src/Squidex/app/shared/components/asset.component.html
  3. 163
      src/Squidex/app/shared/components/asset.component.scss
  4. 5
      src/Squidex/app/theme/_vars.scss

4
src/Squidex/app/features/content/shared/assets-editor.component.scss
View File

@ -24,8 +24,8 @@
@include border-radius; @include border-radius;
@include flex-box; @include flex-box;
border: 2px dashed $color-border; border: 2px dashed $color-border;
height: $asset-height + 1.5rem; height: $asset-height;
width: $asset-height; width: $asset-width;
margin-left: 8px; margin-left: 8px;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: normal; font-weight: normal;

79
src/Squidex/app/shared/components/asset.component.html
View File

@ -8,14 +8,14 @@
<div *ngIf="asset.isImage" class="file-image"> <div *ngIf="asset.isImage" class="file-image">
<img [sqxImageSource]="asset | sqxAssetPreviewUrl"> <img [sqxImageSource]="asset | sqxAssetPreviewUrl">
</div> </div>
<div *ngIf="!asset.isImage" class="file-icon-container"> <div *ngIf="!asset.isImage" class="file-icon">
<img class="file-icon" [attr.src]="asset | sqxFileIcon"> <img [attr.src]="asset | sqxFileIcon">
</div> </div>
<div class="file-overlay"> <div class="overlay">
<div class="file-overlay-background"></div> <div class="overlay-background"></div>
<div class="file-menu"> <div class="overlay-menu">
<a class="file-download" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()"> <a class="file-download" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()">
<i class="icon-download"></i> <i class="icon-download"></i>
</a> </a>
@ -28,46 +28,51 @@
</a> </a>
</div> </div>
<span class="file-overlay-type" *ngIf="asset.fileType"> <span class="overlay-type" *ngIf="asset.fileType">
{{asset.fileType}} {{asset.fileType}}
</span> </span>
<span class="file-user">
<i class="icon-user"></i> {{asset.lastModifiedBy | sqxUserNameRef}}
</span>
<span class="file-modified">
{{asset.lastModified | sqxFromNow}}
</span>
</div>
</div>
</div>
<div class="card-footer" *ngIf="asset && progress == 0">
<div>
<div *ngIf="!renaming" class="file-name editable" [attr.title]="asset.fileName" (dblclick)="renameStart()">
{{asset.fileName}}
</div>
<div *ngIf="renaming">
<form [formGroup]="renameForm.form" (ngSubmit)="renameAsset()">
<sqx-control-errors for="name" [submitted]="renameForm.submitted | async"></sqx-control-errors>
<input type="text" class="form-control form-underlined editable" id="assetName" formControlName="name" autocomplete="off" sqxFocusOnInit (blur)="renameCancel()" /> <div class="overlay-user">
</form> <div>
<i class="icon-user"></i> {{asset.lastModifiedBy | sqxUserNameRef}}
</div>
<div>
{{asset.lastModified | sqxFromNow}}
</div>
</div>
</div> </div>
</div> </div>
<div class="tags">
<sqx-tag-editor [useDefaultValue]="false" [formControl]="tagInput" class="blank"></sqx-tag-editor> <div class="upload-progress" *ngIf="progress > 0">
</div> <sqx-progress-bar mode="Circle" [value]="progress"></sqx-progress-bar>
<div class="file-info">
<ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}}
</div> </div>
</div>
<div class="upload-progress" *ngIf="progress > 0"> <div class="drop-overlay" *ngIf="asset && progress === 0">
<sqx-progress-bar mode="Circle" [value]="progress"></sqx-progress-bar> <div class="drop-overlay-background"></div>
</div>
<div class="drop-overlay" *ngIf="asset && progress == 0"> <span class="drop-overlay-text">Drop to update</span>
<div class="drop-overlay-background"></div> </div>
</div>
<div class="card-footer">
<ng-container *ngIf="asset">
<div>
<div *ngIf="!renaming" class="file-name editable" [attr.title]="asset.fileName" (dblclick)="renameStart()">
{{asset.fileName}}
</div>
<div *ngIf="renaming">
<form [formGroup]="renameForm.form" (ngSubmit)="renameAsset()">
<sqx-control-errors for="name" [submitted]="renameForm.submitted | async"></sqx-control-errors>
<span class="drop-overlay-text">Drop to update</span> <input type="text" class="form-control form-underlined editable" id="assetName" formControlName="name" autocomplete="off" sqxFocusOnInit (blur)="renameCancel()" />
</form>
</div>
</div>
<div class="file-tags tags">
<sqx-tag-editor [useDefaultValue]="false" [formControl]="tagInput" class="blank"></sqx-tag-editor>
</div>
<div class="file-info">
<ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}}
</div>
</ng-container>
</div> </div>
</div> </div>

163
src/Squidex/app/shared/components/asset.component.scss
View File

@ -32,21 +32,7 @@
} }
@mixin asset-link { @mixin asset-link {
& {
font-size: 1.1rem;
font-weight: normal;
cursor: pointer;
color: darken($color-dark-foreground, 10%);
}
&:hover {
color: $color-dark-foreground;
}
&:focus,
&:hover {
text-decoration: none;
}
} }
.drop-overlay { .drop-overlay {
@ -63,55 +49,63 @@
} }
} }
:host {
padding-bottom: 1rem;
padding-left: 8px;
padding-right: 8px;
}
.card { .card {
& { & {
@include overlay-container; @include overlay-container;
width: $asset-width; width: $asset-width;
margin-bottom: 1rem;
margin-left: 8px;
margin-right: 8px;
min-height: $asset-height;
} }
&.selectable { &-body,
cursor: pointer; &-footer {
position: relative;
padding: 1rem;
} }
&-body { &-body {
position: relative; padding: 0;
min-height: 0.75 * $asset-height; min-height: $asset-header;
max-height: 0.75 * $asset-height; max-height: $asset-header;
} }
&-footer { &-footer {
border: 0; padding-top: .5rem;
background: transparent; min-height: $asset-footer;
padding: .8rem; max-height: auto;
padding-top: .4rem;
} }
}
.upload-progress { &.drag {
@include absolute(2rem, 2rem, 2rem, 2rem); .drop-overlay {
} @include opacity(1);
}
.file { .file-type {
&-info { @include opacity(0);
font-size: .8rem; }
} }
&-image { &.selectable {
min-height: 100%; cursor: pointer;
max-height: 100%;
} }
}
.upload-progress {
@include absolute(1rem, 3em, 1rem, 3rem);
}
.file {
&-preview { &-preview {
& { & {
@include absolute(.8rem, .8rem, 0, .8rem); @include absolute(0, 0, 0, 0);
} }
&:hover { &:hover {
.file-overlay { .overlay {
@include opacity(1); @include opacity(1);
} }
@ -121,66 +115,83 @@
} }
} }
&-info { &-type {
margin-top: .25rem; @include transition(opacity .4s ease);
@include absolute(1rem, auto, auto, 1rem);
@include asset-type;
@include border-radius(3px);
background: $color-dark-black;
} }
&-user { &-name,
@include absolute(auto, auto, 1.7rem, .5rem); &-info {
@include truncate;
} }
&-modified { &-image,
@include absolute(auto, auto, .5rem, .5rem); &-icon {
height: $asset-image;
} }
&-menu { &-name {
@include absolute(.5rem, 1rem, auto, auto); line-height: 2rem;
a {
@include asset-link;
}
} }
&-type { &-tags {
@include transition(opacity.4s ease); margin-bottom: .25rem;
@include absolute(.7rem, auto, auto, .5rem);
@include asset-type;
@include border-radius(3px);
background: $color-dark-black;
} }
&-name { &-info {
@include truncate; font-size: .75rem;
font-size: 1rem;
font-weight: normal;
line-height: 2rem;
} }
&-icon { &-icon {
margin-top: 10%; line-height: $asset-image;
margin-bottom: 0;
height: 70%;
}
&-icon-container {
background: $color-border; background: $color-border;
border: 0; border: 0;
text-align: center; text-align: center;
height: 100%;
} }
}
&-overlay { .overlay {
& {
@include overlay;
font-size: .8rem;
font-weight: normal;
}
&-menu {
& { & {
@include overlay; @include absolute(1rem, 1rem, auto, auto);
font-size: .8rem;
font-weight: normal;
} }
&-type { a {
@include absolute(.7rem, auto, auto, .5rem); & {
@include asset-type; font-size: 1.1rem;
font-weight: normal;
cursor: pointer;
color: darken($color-dark-foreground, 10%);
}
&:hover {
color: $color-dark-foreground;
}
&:focus,
&:hover {
text-decoration: none;
}
} }
} }
&-type {
@include absolute(1rem, auto, auto, 1rem);
@include asset-type;
}
&-user {
@include absolute(auto, auto, 1rem, 1rem);
}
} }
.editable { .editable {

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

@ -98,4 +98,7 @@ $panel-sidebar: 3.75rem;
$panel-light-background: #fff; $panel-light-background: #fff;
$asset-width: 16rem; $asset-width: 16rem;
$asset-height: 18rem; $asset-height: 19rem;
$asset-header: 12rem;
$asset-image: 12rem;
$asset-footer: 7rem;
Write Preview
Loading…
Cancel
Save