From e5f95a0addc5175986e25861067612a033eef07f Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 26 Sep 2018 18:14:55 +0200 Subject: [PATCH] Started with list view. --- .../assets/pages/assets-page.component.html | 12 +- .../assets/pages/assets-page.component.ts | 11 + .../shared/assets-editor.component.html | 4 +- .../shared/components/asset.component.html | 185 ++++--- .../shared/components/asset.component.scss | 132 ++++- .../app/shared/components/asset.component.ts | 9 +- .../components/assets-list.component.html | 53 +- .../components/assets-list.component.ts | 5 +- .../components/assets-selector.component.html | 11 + .../components/assets-selector.component.ts | 15 +- .../components/schema-category.component.html | 2 +- src/Squidex/app/theme/_forms.scss | 64 +-- .../app/theme/icomoon/demo-files/demo.css | 8 +- src/Squidex/app/theme/icomoon/demo.html | 510 ++++++------------ .../app/theme/icomoon/fonts/icomoon.eot | Bin 24920 -> 25328 bytes .../app/theme/icomoon/fonts/icomoon.svg | 4 +- .../app/theme/icomoon/fonts/icomoon.ttf | Bin 24756 -> 25164 bytes .../app/theme/icomoon/fonts/icomoon.woff | Bin 24832 -> 25240 bytes src/Squidex/app/theme/icomoon/selection.json | 306 ++++++----- src/Squidex/app/theme/icomoon/style.css | 66 +-- 20 files changed, 737 insertions(+), 660 deletions(-) diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.html b/src/Squidex/app/features/assets/pages/assets-page.component.html index 594f6220c..402bcdbad 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.html +++ b/src/Squidex/app/features/assets/pages/assets-page.component.html @@ -34,11 +34,21 @@ +
+
+ + +
+
- + diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.ts b/src/Squidex/app/features/assets/pages/assets-page.component.ts index 2e5ead4b5..9eb1241e4 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.ts +++ b/src/Squidex/app/features/assets/pages/assets-page.component.ts @@ -14,6 +14,7 @@ import { onErrorResumeNext } from 'rxjs/operators'; import { AppsState, AssetsState, + LocalStoreService, Queries, UIState } from '@app/shared'; @@ -28,11 +29,15 @@ export class AssetsPageComponent implements OnInit { public queries = new Queries(this.uiState, 'assets'); + public isListView: boolean; + constructor( public readonly appsState: AppsState, public readonly assetsState: AssetsState, + private readonly localStore: LocalStoreService, private readonly uiState: UIState ) { + this.isListView = this.localStore.get('assetView') === 'List'; } public ngOnInit() { @@ -70,5 +75,11 @@ export class AssetsPageComponent implements OnInit { public isSelectedQuery(query: string) { return query === this.assetsState.snapshot.assetsQuery || (!query && !this.assetsState.assetsQuery); } + + public changeView(isListView: boolean) { + this.localStore.set('assetView', isListView ? 'List' : 'Grid'); + + this.isListView = isListView; + } } diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.html b/src/Squidex/app/features/content/shared/assets-editor.component.html index 8e8499fbd..115d7fceb 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.html +++ b/src/Squidex/app/features/content/shared/assets-editor.component.html @@ -4,11 +4,13 @@ Drop files here to add them. - diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html index 294c7c14b..e8eebb1c2 100644 --- a/src/Squidex/app/shared/components/asset.component.html +++ b/src/Squidex/app/shared/components/asset.component.html @@ -1,84 +1,147 @@ -
-
-
- - {{asset.fileType}} - - -
- -
-
- -
- -
-
- - - - + +
+
+
+ {{asset.fileType}} + +
+ +
+
+ +
-
-
- {{asset.lastModifiedBy | sqxUserNameRef}} +
+
+ + -
- {{asset.lastModified | sqxFromNow}} + + + {{asset.fileType}} + + +
+
+ {{asset.lastModifiedBy | sqxUserNameRef}} +
+
+ {{asset.lastModified | sqxFromNow}} +
-
-
- +
+ +
+ +
+
+ + Drop to update +
- -
-
- - Drop to update +
-
+
+
+ + +
+
diff --git a/src/Squidex/app/shared/components/assets-selector.component.ts b/src/Squidex/app/shared/components/assets-selector.component.ts index 4380f6358..457929c2d 100644 --- a/src/Squidex/app/shared/components/assets-selector.component.ts +++ b/src/Squidex/app/shared/components/assets-selector.component.ts @@ -13,7 +13,8 @@ import { onErrorResumeNext } from 'rxjs/operators'; import { AssetDto, AssetsDialogState, - fadeAnimation + fadeAnimation, + LocalStoreService } from '@app/shared/internal'; @Component({ @@ -28,12 +29,16 @@ export class AssetsSelectorComponent implements OnInit { public selectedAssets: { [id: string]: AssetDto } = {}; public selectionCount = 0; + public isListView = false; + @Output() public selected = new EventEmitter(); constructor( - public readonly state: AssetsDialogState + public readonly state: AssetsDialogState, + private readonly localStore: LocalStoreService ) { + this.isListView = this.localStore.get('assetView') === 'List'; } public ngOnInit() { @@ -69,5 +74,11 @@ export class AssetsSelectorComponent implements OnInit { this.selectionCount = Object.keys(this.selectedAssets).length; } + + public changeView(isListView: boolean) { + this.localStore.set('assetView', isListView ? 'List' : 'Grid'); + + this.isListView = isListView; + } } diff --git a/src/Squidex/app/shared/components/schema-category.component.html b/src/Squidex/app/shared/components/schema-category.component.html index 19faa1ec9..f582ed000 100644 --- a/src/Squidex/app/shared/components/schema-category.component.html +++ b/src/Squidex/app/shared/components/schema-category.component.html @@ -10,7 +10,7 @@ - +
diff --git a/src/Squidex/app/theme/_forms.scss b/src/Squidex/app/theme/_forms.scss index b875570b4..2c2e9e6e7 100644 --- a/src/Squidex/app/theme/_forms.scss +++ b/src/Squidex/app/theme/_forms.scss @@ -179,39 +179,41 @@ } } -.form-underlined { - & { - @include border-radius(0); - padding-left: 0; - padding-right: 0; - border-color: transparent; - border-bottom: 1px solid $color-input-border; - } - - &:focus, - &.focus { - @include box-shadow-none; - background: transparent; - border-color: transparent; - border-bottom-color: $color-theme-blue; - outline: none; - } +input { + &.form-underlined { + & { + @include border-radius(0); + padding-left: 0; + padding-right: 0; + border-color: transparent; + border-bottom: 1px solid $color-input-border; + } - &.ng-invalid { - &.ng-dirty { - & { - @include box-shadow-none; - background: transparent; - border-color: transparent; - border-bottom-color: $color-theme-error; - outline: none; - } + &:focus, + &.focus { + @include box-shadow-none; + background: transparent; + border-color: transparent; + border-bottom-color: $color-theme-blue; + outline: none; + } - &:hover, - &:focus { - @include box-shadow-none; - border-color: transparent; - border-bottom-color: $color-theme-error-dark; + &.ng-invalid { + &.ng-dirty { + & { + @include box-shadow-none; + background: transparent; + border-color: transparent; + border-bottom-color: $color-theme-error; + outline: none; + } + + &:hover, + &:focus { + @include box-shadow-none; + border-color: transparent; + border-bottom-color: $color-theme-error-dark; + } } } } diff --git a/src/Squidex/app/theme/icomoon/demo-files/demo.css b/src/Squidex/app/theme/icomoon/demo-files/demo.css index 7876bec84..98e3bf639 100644 --- a/src/Squidex/app/theme/icomoon/demo-files/demo.css +++ b/src/Squidex/app/theme/icomoon/demo-files/demo.css @@ -147,7 +147,7 @@ p { font-size: 16px; } .fs1 { - font-size: 32px; + font-size: 20px; } .fs2 { font-size: 32px; @@ -156,12 +156,12 @@ p { font-size: 32px; } .fs4 { - font-size: 24px; + font-size: 32px; } .fs5 { - font-size: 28px; + font-size: 24px; } .fs6 { - font-size: 20px; + font-size: 28px; } diff --git a/src/Squidex/app/theme/icomoon/demo.html b/src/Squidex/app/theme/icomoon/demo.html index 17d4d4676..f6c2a3ed7 100644 --- a/src/Squidex/app/theme/icomoon/demo.html +++ b/src/Squidex/app/theme/icomoon/demo.html @@ -9,11 +9,62 @@
-

Font Name: icomoon (Glyphs: 95)

+

Font Name: icomoon (Glyphs: 97)

-

Grid Size: 32

+

Grid Size: 20

+
+
+ + + + icon-grid1 +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-list +
+
+ + +
+
+ liga: + +
+
+
+ + + + icon-info +
+
+ + +
+
+ liga: + +
+
+
+
+

Grid Size: 32

+
@@ -29,7 +80,7 @@
-
+
@@ -45,7 +96,7 @@
-
+
@@ -61,7 +112,7 @@
-
+
@@ -80,7 +131,7 @@

Grid Size: Unknown

-
+
@@ -96,7 +147,7 @@
-
+
@@ -112,7 +163,7 @@
-
+
@@ -128,7 +179,7 @@
-
+
@@ -144,7 +195,7 @@
-
+
@@ -160,7 +211,7 @@
-
+
@@ -176,7 +227,7 @@
-
+
@@ -192,7 +243,7 @@
-
+
@@ -208,7 +259,7 @@
-
+
@@ -224,7 +275,7 @@
-
+
@@ -240,7 +291,7 @@
-
+
@@ -256,7 +307,7 @@
-
+
@@ -272,7 +323,7 @@
-
+
@@ -288,7 +339,7 @@
-
+
@@ -304,7 +355,7 @@
-
+
@@ -320,7 +371,7 @@
-
+
@@ -336,7 +387,7 @@
-
+
@@ -352,7 +403,7 @@
-
+
@@ -368,7 +419,7 @@
-
+
@@ -384,7 +435,7 @@
-
+
@@ -400,7 +451,7 @@
-
+
@@ -416,7 +467,7 @@
-
+
@@ -432,7 +483,7 @@
-
+
@@ -448,7 +499,7 @@
-
+
@@ -464,7 +515,7 @@
-
+
@@ -480,7 +531,7 @@
-
+
@@ -496,7 +547,7 @@
-
+
@@ -512,7 +563,7 @@
-
+
@@ -528,7 +579,7 @@
-
+
@@ -544,7 +595,7 @@
-
+
@@ -560,7 +611,7 @@
-
+
@@ -576,7 +627,7 @@
-
+
@@ -592,7 +643,7 @@
-
+
@@ -608,7 +659,7 @@
-
+
@@ -624,7 +675,7 @@
-
+
-
+
@@ -656,7 +707,7 @@
-
+
@@ -672,7 +723,7 @@
-
+
@@ -688,7 +739,7 @@
-
+
@@ -704,7 +755,7 @@
-
+
@@ -720,7 +771,7 @@
-
+
@@ -736,7 +787,7 @@
-
+
@@ -752,7 +803,7 @@
-
+
@@ -768,7 +819,7 @@
-
+
@@ -784,7 +835,7 @@
-
+
@@ -800,7 +851,7 @@
-
+
@@ -816,7 +867,7 @@
-
+
@@ -832,7 +883,7 @@
-
+
@@ -848,7 +899,7 @@
-
+
@@ -864,7 +915,7 @@
-
+
@@ -880,7 +931,7 @@
-
+
@@ -896,7 +947,7 @@
-
+
@@ -915,7 +966,7 @@

Grid Size: 16

-
+
@@ -931,7 +982,7 @@
-
+
@@ -947,7 +998,7 @@
-
+
@@ -963,7 +1014,7 @@
-
+
@@ -979,7 +1030,7 @@
-
+
@@ -995,7 +1046,7 @@
-
+
@@ -1011,7 +1062,7 @@
-
+
@@ -1027,7 +1078,7 @@
-
+
@@ -1043,7 +1094,7 @@
-
+
@@ -1059,7 +1110,7 @@
-
+
@@ -1075,7 +1126,7 @@
-
+
@@ -1091,7 +1142,7 @@
-
+
@@ -1107,7 +1158,7 @@
-
+
@@ -1123,7 +1174,7 @@
-
+
@@ -1139,7 +1190,7 @@
-
+
@@ -1155,7 +1206,7 @@
-
+
@@ -1171,7 +1222,7 @@
-
+
@@ -1187,7 +1238,7 @@
-
+
@@ -1206,7 +1257,7 @@

Grid Size: 24

-
+
@@ -1222,7 +1273,7 @@
-
+
@@ -1238,7 +1289,7 @@
-
+
@@ -1254,7 +1305,7 @@
-
+
@@ -1270,234 +1321,10 @@
-
-
- - - - icon-orleans -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-document-lock -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-document-unpublish -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-angle-down -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-angle-left -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-angle-right -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-angle-up -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-api -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-assets -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-bug -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-caret-down -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-caret-left -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-caret-right -
-
- - -
-
- liga: - -
-
-
-
- - - - icon-caret-up -
-
- - -
-
- liga: - -
-

Grid Size: 14

-
+
@@ -1513,7 +1340,7 @@
-
+
@@ -1529,7 +1356,7 @@
-
+
@@ -1545,7 +1372,7 @@
-
+
@@ -1561,7 +1388,7 @@
-
+
@@ -1577,7 +1404,7 @@
-
+
@@ -1593,7 +1420,7 @@
-
+
@@ -1609,7 +1436,7 @@
-
+
@@ -1625,7 +1452,7 @@
-
+
@@ -1641,7 +1468,7 @@
-
+
@@ -1657,7 +1484,7 @@
-
+
@@ -1673,7 +1500,7 @@
-
+
@@ -1689,7 +1516,7 @@
-
+
@@ -1705,7 +1532,7 @@
-
+
@@ -1721,7 +1548,7 @@
-
+
@@ -1737,7 +1564,7 @@
-
+
@@ -1753,7 +1580,7 @@
-
+
@@ -1769,7 +1596,7 @@
-
+
@@ -1785,7 +1612,7 @@
-
+
@@ -1801,7 +1628,7 @@
-
+
@@ -1817,7 +1644,7 @@
-
+
@@ -1833,7 +1660,7 @@
-
+
@@ -1849,7 +1676,7 @@
-
+
@@ -1865,7 +1692,7 @@
-
+
@@ -1881,12 +1708,12 @@
-
+
- + - icon-list + icon-list1
@@ -1897,7 +1724,7 @@
-
+
@@ -1913,7 +1740,7 @@
-
+
@@ -1930,25 +1757,6 @@
-
-

Grid Size: 20

-
-
- - - - icon-info -
-
- - -
-
- liga: - -
-
-
diff --git a/src/Squidex/app/theme/icomoon/fonts/icomoon.eot b/src/Squidex/app/theme/icomoon/fonts/icomoon.eot index b195bfb60674b73cffbc6e37dffe9004b149f33c..b7df7a30283335d11c1a666673b22f8fc2e85bf8 100644 GIT binary patch delta 849 zcmah{O=uHA6#iy6jc$sh+U&Mqjr|F2{u-;TQLrK?3TmKKdPr-NxJi=+X>70oBMP}x z4}#DV5A6yCrQSpjx%8kQf}q6~1);qth+c9Fie9X{zKJ%8B6^s4-_Lt9^B%MQl$D+_ zb14c0qO)edX*jX!%-@OFW`|5}^J2EbZ~XU5g3G{pwuGZeRuPh3uX z)W152&jF)7$+$XZgYgy!JtyCvBta7D5;&RDSdSQGw44zLKiX$}|Gd?t#nnY!;Vc2?`>R5iS&{#MwYy@&P@^Uti29B*o=8o=m3is`a`GLc8%LLYb8Gu ze&_G})V0v1JAKY+7hDUjSMGNAT~Dhg;JNR0c#nE7b~ksw@io)u0^%$Pg`W(e{Ami2 Gd+Y~A^1x64 delta 379 zcmexxl<~$PMz)AV28JyO6WPpI9=nRXnCMVmzlVW=0fZBha}x`0vCgz*U|^I1@>|jq ziwl6X0Fb``NOPp;RHg+k|CI#fuV7$^nv#*4m?Hc;f}MdO#s(;FmH`ytWMWML@=Jhx zm5khyihNIzLLh$zP)|=zesZFhQ~V(YhBy_V{E6JeiUNizJ;o@Yz#E`|LSABS>P#=r z-wX`#JU|U?1^LA#49q|ohJ+~~c?M?Ylao^ztA#UwJTaidm>Jj@7#S2^`o0XD{Eksv z(f?)e%cz&9K5%_F`Ty_#{|t=(AB(eyGmA5cGm1?U2Ow z`rI-vL|h-o^V@u7;AR2Y#Blvw=V2H9Xm10UgG`ki1zh@em^bxqE9h diff --git a/src/Squidex/app/theme/icomoon/fonts/icomoon.svg b/src/Squidex/app/theme/icomoon/fonts/icomoon.svg index 533ca5aae..a4c3cddb1 100644 --- a/src/Squidex/app/theme/icomoon/fonts/icomoon.svg +++ b/src/Squidex/app/theme/icomoon/fonts/icomoon.svg @@ -85,9 +85,11 @@ + + @@ -101,5 +103,5 @@ - + \ No newline at end of file diff --git a/src/Squidex/app/theme/icomoon/fonts/icomoon.ttf b/src/Squidex/app/theme/icomoon/fonts/icomoon.ttf index c2460360e885f8eaf448a8ad011111c12c9ce88d..9a148796a6cb2d87fc2ab562b112efe2cc1546a9 100644 GIT binary patch delta 827 zcmdmTknzkB#(D-u1_lOhh6V;^1_S?KeItG$-n~GPJwTk0oSRtiA#r^d0|TQBkYAFX zSX=<41%UhsK$;^xr!wuyzi%o){tO0&7=w(|#1s*R|92S}Vow0&%`$)joJ_1~3=DBV zE`v%&Zb?PCr|1nJAEakWPJXguVue=k9|nf_9Y6(VauX{G7-|@!fOfY4`3iZ7xv4X~ zIDZ5AOMn{M3i69ffDQ$MBpr}E12glfi3h6rBY+$spu3nEn1KFKnC!J|6_3$ab~d@0+IZ)fvOlMFH8{LypZvaPdyvMEQVRkX+T4H8KfDs7%Ujv z7(#${DJrpviijC28kw1zs0pL+7$JhnP(gNOuu^MAuu^6`Jf?^Lu8VSViZW`7a&ZOy zD*&?VMHwdmsejR6N)#+6x+DgqDn^WxQw$4>i9t?OR1Spy!&!{8U}A6vLK2|?6mqN# z4F5l~FfborkY_Mq*u2^=i>aQ4;Vdu^jDdl`4;0mBum=VJ&>ymlB4QwK*)p1_DWdTS z%FmhwawLdg41_cPwZfT5qB_h#kH971tbeoQ#AbpFnJFfRU~Lu&G~kxeIF}X~&u{aU zftv;7DTeD8W7omx$q6y$jH#Pv#CS6b&H_mz;j@$9#NIPg`=mZk{hx-OMvEqc<~+>{ tT1r}rv=y{{wAbjU=s4*V=}PEc(USmYja0@61~HJy3{2oe!ymtt5dfO3u?heH delta 387 zcmX?egmKG3#(D-u1_lOhh6V;^1_S?KeItG$-aSAO5Kc(WO)R*@I@6Ycfl&s?Z%I!q zE&$R3K>h+C&5@o{nHISGR}zrFf`K7wN=9m8itz6Ub_RwR8=$;d22g;Li8TetF9GsZ zGIC2Q@;yZgf&3XjJv}-3$&QI$PVt8r7~)ib3QpuERunK)F-8ITZ-9J-yu{qpnO>Z~ z85rVufEwBg@{3D=4h4dQDIj?UX6BO<4^-=B06AhncQG@t0sW)!()VTH%ZQh8FHe2o z`f&39-~azXT7cpVFa2KzPflPI;S*;PXB3+z5Y9gnsEKj1VUqafiHv`IHrM)BFl}BK zq|Yt$Ld5lPJipCX25uIx?(63|4}%yWdh(lCbH?P&DskS7oD3jo5T4u+e@{bQO}$Nh sn}(6b1x+T+5X~!EL0WZM_q4;bOSG5hcvJTE8!3$08kKW&;S4c diff --git a/src/Squidex/app/theme/icomoon/fonts/icomoon.woff b/src/Squidex/app/theme/icomoon/fonts/icomoon.woff index 5decab2c6a14ce829781fc9ffeaf6b7752bf323f..136754e89b190ca3f24dc5ffa223fd30c9564d09 100644 GIT binary patch delta 865 zcmZoT#5m(9qe!{Gn;Qco0}v$5VBiMRJ`+W>>-Q$-CKfO-FlGRSNUxP~z*FEKY2 zDE0xUu?>W0dU5_P$S(#uHVJ4bR2?&r#mszaG7n?5a|Dnr#2~=H%)kWnvBJxUmvJvo zec<|V^8ere|ABHqJuewvMj?qY{(mgaBF-!}Lm-lWHc%hq=39*XzV&PjvlwPErvc68 zWsqjjVz6LvV+a8{K~afKR7A{J(a6lyL`@il#|RNrh6=JPgOyq{f|WAk;W0h@cU_c| zQ50W4u{S_I2NVmW=TxQv#lA2wL`?zVz~#S^GEx&$7#LzYfNIP@Son7Ydj?PtD0TqI zR{>#8Cf1aU+>#2Q*b|`s9uUs=6e-NfPX?;