From e5f95a0addc5175986e25861067612a033eef07f Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 26 Sep 2018 18:14:55 +0200 Subject: [PATCH 01/40] 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?; Date: Wed, 26 Sep 2018 18:29:47 +0200 Subject: [PATCH 02/40] Small improvement. --- .../assets/pages/assets-page.component.html | 2 +- .../shared/assets-editor.component.html | 58 ++++++++++++++----- .../shared/assets-editor.component.scss | 14 ++++- .../content/shared/assets-editor.component.ts | 12 +++- .../components/assets-selector.component.html | 2 +- 5 files changed, 69 insertions(+), 19 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 402bcdbad..920d9baef 100644 --- a/src/Squidex/app/features/assets/pages/assets-page.component.html +++ b/src/Squidex/app/features/assets/pages/assets-page.component.html @@ -35,7 +35,7 @@
-
+
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 115d7fceb..1a24aa4ed 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.html +++ b/src/Squidex/app/features/content/shared/assets-editor.component.html @@ -1,18 +1,50 @@
-
-
- Drop files here to add them. +
+
+
+
+ Drop files or click here to add assets. +
+
+
+
+ + +
+
- - - - - +
+ +
+ + + + + + + + +
+
+ + + + +
+
+
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.scss b/src/Squidex/app/features/content/shared/assets-editor.component.scss index 30c6f3189..be74dae8c 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.scss +++ b/src/Squidex/app/features/content/shared/assets-editor.component.scss @@ -18,15 +18,23 @@ } } +.header { + margin-bottom: .5rem; +} + +.list { + margin-left: 8px; + margin-right: 8px; +} + .drop-area { & { @include transition(border-color .4s ease); @include border-radius; @include flex-box; + @include truncate; border: 2px dashed $color-border; - height: $asset-height; - width: $asset-width; - margin-left: 8px; + height: 2.5rem; font-size: 1.2rem; font-weight: normal; text-align: center; diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts index cb022c704..4665593f4 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.ts +++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts @@ -16,6 +16,7 @@ import { AssetsService, DialogModel, ImmutableArray, + LocalStoreService, Types } from '@app/shared'; @@ -40,12 +41,15 @@ export class AssetsEditorComponent implements ControlValueAccessor { public newAssets = ImmutableArray.empty(); public oldAssets = ImmutableArray.empty(); + public isListView = false; public isDisabled = false; constructor( private readonly appsState: AppsState, - private readonly assetsService: AssetsService + private readonly assetsService: AssetsService, + private readonly localStore: LocalStoreService ) { + this.isListView = this.localStore.get('assetView') === 'List'; } public writeValue(obj: any) { @@ -128,4 +132,10 @@ export class AssetsEditorComponent implements ControlValueAccessor { this.callTouched(); this.callChange(ids); } + + public changeView(isListView: boolean) { + this.localStore.set('assetView', isListView ? 'List' : 'Grid'); + + this.isListView = isListView; + } } \ No newline at end of file diff --git a/src/Squidex/app/shared/components/assets-selector.component.html b/src/Squidex/app/shared/components/assets-selector.component.html index 8959285df..7b6ca4234 100644 --- a/src/Squidex/app/shared/components/assets-selector.component.html +++ b/src/Squidex/app/shared/components/assets-selector.component.html @@ -30,7 +30,7 @@
-
+
From a3ff5fa1808442f1359a28eca3b18911ed5bd54e Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 26 Sep 2018 18:56:10 +0200 Subject: [PATCH 03/40] List view finalized. --- .../shared/assets-editor.component.html | 36 ++++-------- .../shared/assets-editor.component.scss | 7 +++ .../shared/components/asset.component.html | 2 +- .../components/assets-list.component.html | 57 ++++++------------- .../components/assets-list.component.scss | 7 +++ 5 files changed, 42 insertions(+), 67 deletions(-) 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 1a24aa4ed..b931da3c0 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.html +++ b/src/Squidex/app/features/content/shared/assets-editor.component.html @@ -19,32 +19,16 @@
-
- - - - - - - - -
-
- - - - -
-
-
+
+ + + +
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.scss b/src/Squidex/app/features/content/shared/assets-editor.component.scss index be74dae8c..5f32e9ff6 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.scss +++ b/src/Squidex/app/features/content/shared/assets-editor.component.scss @@ -27,6 +27,13 @@ margin-right: 8px; } +.unrow { + display: block; + padding-left: 8px; + padding-right: 8px; + margin: 0; +} + .drop-area { & { @include transition(border-color .4s ease); diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html index e8eebb1c2..8153de9db 100644 --- a/src/Squidex/app/shared/components/asset.component.html +++ b/src/Squidex/app/shared/components/asset.component.html @@ -122,7 +122,7 @@
-
+
diff --git a/src/Squidex/app/shared/components/assets-list.component.html b/src/Squidex/app/shared/components/assets-list.component.html index 247fb6aae..2cddf2d30 100644 --- a/src/Squidex/app/shared/components/assets-list.component.html +++ b/src/Squidex/app/shared/components/assets-list.component.html @@ -14,48 +14,25 @@
Drop file on existing item to replace the asset with a newer version.
-
- - +
+ + + + + - - - - - - - -
- - - - - - - -
-
\ No newline at end of file diff --git a/src/Squidex/app/shared/components/assets-list.component.scss b/src/Squidex/app/shared/components/assets-list.component.scss index 5c9a8cbca..7acbb132d 100644 --- a/src/Squidex/app/shared/components/assets-list.component.scss +++ b/src/Squidex/app/shared/components/assets-list.component.scss @@ -1,6 +1,13 @@ @import '_vars'; @import '_mixins'; +.unrow { + display: block; + padding-left: 8px; + padding-right: 8px; + margin: 0; +} + .file-drop { & { @include transition(border-color .4s ease); From bcc81aaefac681e295493e9bf20180c53f1fa78e Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Wed, 26 Sep 2018 20:13:47 +0200 Subject: [PATCH 04/40] Sorting for assets. --- .../shared/assets-editor.component.html | 35 +++++++++++++------ .../shared/assets-editor.component.scss | 9 ++--- .../content/shared/assets-editor.component.ts | 8 +++++ .../shared/references-editor.component.html | 8 ++--- 4 files changed, 42 insertions(+), 18 deletions(-) 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 b931da3c0..0e2ce62ca 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.html +++ b/src/Squidex/app/features/content/shared/assets-editor.component.html @@ -19,16 +19,31 @@
-
- - - - +
+ +
+ + + + +
+
+ + + + + +
+
+ + +
+
+
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.scss b/src/Squidex/app/features/content/shared/assets-editor.component.scss index 5f32e9ff6..8ee466d94 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.scss +++ b/src/Squidex/app/features/content/shared/assets-editor.component.scss @@ -18,15 +18,16 @@ } } -.header { - margin-bottom: .5rem; -} - .list { margin-left: 8px; margin-right: 8px; } +.body { + margin-bottom: -.25rem; + margin-top: 1rem; +} + .unrow { display: block; padding-left: 8px; diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.ts b/src/Squidex/app/features/content/shared/assets-editor.component.ts index 4665593f4..bcfeaa2e7 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.ts +++ b/src/Squidex/app/features/content/shared/assets-editor.component.ts @@ -133,6 +133,14 @@ export class AssetsEditorComponent implements ControlValueAccessor { this.callChange(ids); } + public sort(assets: AssetDto[]) { + if (assets) { + this.oldAssets = ImmutableArray.of(assets); + + this.updateValue(); + } + } + public changeView(isListView: boolean) { this.localStore.set('assetView', isListView ? 'List' : 'Grid'); diff --git a/src/Squidex/app/features/content/shared/references-editor.component.html b/src/Squidex/app/features/content/shared/references-editor.component.html index cefec023c..7fbb63a25 100644 --- a/src/Squidex/app/features/content/shared/references-editor.component.html +++ b/src/Squidex/app/features/content/shared/references-editor.component.html @@ -2,7 +2,7 @@
- Click here to link a content. + Click here to link content items.
@@ -12,10 +12,10 @@ + (deleting)="remove(content)"> From 96fc5f906df950d091bdae61bcff54fcb3013af4 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Thu, 27 Sep 2018 09:31:29 +0200 Subject: [PATCH 05/40] Style improvements. --- .../shared/assets-editor.component.html | 20 ++++--- .../shared/assets-editor.component.scss | 6 +- .../shared/components/asset.component.html | 26 ++++---- .../shared/components/asset.component.scss | 60 ++++++++----------- 4 files changed, 53 insertions(+), 59 deletions(-) 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 0e2ce62ca..e12d1061e 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.html +++ b/src/Squidex/app/features/content/shared/assets-editor.component.html @@ -32,15 +32,17 @@
- - - -
-
- - +
+ + + +
+
+ + +
diff --git a/src/Squidex/app/features/content/shared/assets-editor.component.scss b/src/Squidex/app/features/content/shared/assets-editor.component.scss index 8ee466d94..4f208dcc6 100644 --- a/src/Squidex/app/features/content/shared/assets-editor.component.scss +++ b/src/Squidex/app/features/content/shared/assets-editor.component.scss @@ -18,6 +18,10 @@ } } +.list-view { + margin-bottom: 1rem; +} + .list { margin-left: 8px; margin-right: 8px; @@ -47,8 +51,8 @@ font-weight: normal; text-align: center; padding: 0 2rem; - cursor: pointer; color: darken($color-border, 30%); + cursor: pointer; } &:hover { diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html index 8153de9db..9eeb0acd0 100644 --- a/src/Squidex/app/shared/components/asset.component.html +++ b/src/Squidex/app/shared/components/asset.component.html @@ -48,10 +48,9 @@
-
+
- - Drop to update +
Drop to update