drag handle to languages and form array.

src/Squidex/app/features/content/shared/array-editor.component.html

@@ -1,8 +1,9 @@
-<div class="array-container" *ngIf="arrayControl.controls.length > 0" [sqxSortModel]="arrayControl.controls" (sqxSorted)="sort($event)">
+<div class="array-container" *ngIf="arrayControl.controls.length > 0" [sqxSortModel]="arrayControl.controls" (sqxSorted)="sort($event)" dragHandle=".drag-handle">
     <div class="item" *ngFor="let itemForm of arrayControl.controls; let i = index">
         <sqx-array-item
             [form]="form"
             [field]="field"
+            [index]="i"
             [itemForm]="itemForm"
             [language]="language"
             [languages]="languages"

src/Squidex/app/features/content/shared/array-item.component.html

@@ -1,7 +1,13 @@
 <div class="item" [class.invalid]="isInvalid | async">
-    <button type="button" class="btn btn-link btn-danger item-remove" (click)="removing.emit(); $event.preventDefault()">
-        <i class="icon-bin2"></i>
-    </button>
+    <div class="header drag-handle">
+        <i class="icon-drag2 mr-1"></i>
+
+        <span class="header-text text-decent">Item #{{index + 1}}</span>
+
+        <button type="button" class="btn btn-link btn-danger item-remove" (click)="removing.emit(); $event.preventDefault()">
+            <i class="icon-bin2"></i>
+        </button>
+    </div>
     
     <div class="form-group" *ngFor="let fieldControl of fieldControls">
         <sqx-field-editor

src/Squidex/app/features/content/shared/array-item.component.scss

@@ -15,6 +15,10 @@
     }
 }
 
+.header {
+    margin-bottom: .25rem;
+}
+
 .invalid {
     border-left-color: $color-theme-error;
 }

src/Squidex/app/features/content/shared/array-item.component.ts

@@ -34,6 +34,9 @@ export class ArrayItemComponent implements OnChanges {
     @Input()
     public field: RootFieldDto;
 
+    @Input()
+    public index: number;
+
     @Input()
     public itemForm: FormGroup;
 

src/Squidex/app/features/settings/pages/languages/language.component.html

@@ -4,7 +4,7 @@
             <div class="col-2" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">
                 {{language.iso2Code}}
             </div>
-            <div class="col-6" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">
+            <div class="col-8" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">
                 {{language.englishName}}
             </div>
             <div class="col-auto">
@@ -38,9 +38,12 @@
                     <label class="col-3 col-form-label fallback-label">Fallback</label>
 
                     <div class="col-9">
-                        <div class="fallback-languages" [sqxSortModel]="fallbackLanguages.mutableValues" *ngIf="fallbackLanguages.length > 0">
+                        <div class="fallback-languages" [sqxSortModel]="fallbackLanguages.mutableValues" dragHandle=".drag-handle" *ngIf="fallbackLanguages.length > 0">
                             <div class="fallback-language" *ngFor="let language of fallbackLanguages">
-                                <div class="row">
+                                <div class="row no-gutters">
+                                    <div class="col-auto">
+                                        <i class="icon-drag2 drag-handle mr-1"></i>
+                                    </div>
                                     <div class="col">
                                         {{language.englishName}}
                                     </div>

src/Squidex/app/features/settings/pages/languages/language.component.scss

@@ -17,23 +17,19 @@ $field-header: #e7ebef;
     &-languages {
         @include border-radius;
         background: $color-border;
-        border: 0;
-        padding: .5rem;
+        border-top: .5rem solid $color-border;
+        border-bottom: 1px solid $color-border;
+        padding: 0 .5rem;
     }
 
     &-language {
-        & {
-            @include border-radius(2px);
-            padding: .5rem;
-            background: $color-dark-foreground;
-            border: 0;
-            margin-bottom: .5rem;
-            line-height: 2rem;
-        }
-
-        &:last-child {
-            margin: 0;
-        }
+        @include border-radius(2px);
+        padding: .5rem;
+        background: $color-dark-foreground;
+        border: 0;
+        margin: 0;
+        margin-bottom: .5rem;
+        line-height: 2rem;
     }
 
     &-label {

src/Squidex/app/features/settings/pages/roles/role.component.scss

@@ -15,10 +15,6 @@
     @include truncate;
 }
 
-.text-decent {
-    color: $color-text-decent;
-}
-
 .text-force {
     color: $color-text;
 }

src/Squidex/app/framework/angular/sorted.directive.ts

@@ -15,6 +15,9 @@ import Sortable = require('sortablejs');
 export class SortedDirective implements OnDestroy, OnInit {
     private sortable: Sortable;
 
+    @Input()
+    public dragHandle: string;
+
     @Input('sqxSortModel')
     public sortModel: any[];
 
@@ -46,7 +49,9 @@ export class SortedDirective implements OnDestroy, OnInit {
 
                     this.sorted.emit(newModel);
                 }
-            }
+            },
+
+            handle: this.dragHandle
         });
     }
 }

src/Squidex/app/theme/_common.scss

@@ -21,6 +21,14 @@ body {
     font-size: .8rem;
 }
 
+.text-decent {
+    color: $color-text-decent;
+}
+
+.drag-handle {
+    cursor: move;
+}
+
 // Rich editor icon. Must be placed here, because element is not created by angular.
 .mce-i-assets {
     & {

src/Squidex/app/theme/icomoon/demo.html

@@ -9,10 +9,26 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;100)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;101)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-drag2">
+                
+                </span>
+                <span class="mls"> icon-drag2</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e961" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe961;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-comments">

src/Squidex/app/theme/icomoon/fonts/icomoon.svg

@@ -104,6 +104,7 @@
 <glyph unicode="&#xe95e;" glyph-name="star-empty" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-223.462-117.48 42.676 248.83-180.786 176.222 249.84 36.304 111.732 226.396 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />
 <glyph unicode="&#xe95f;" glyph-name="comments" d="M854 256.667v512h-684v-598l86 86h598zM854 852.667c46 0 84-38 84-84v-512c0-46-38-86-84-86h-598l-170-170v768c0 46 38 84 84 84h684z" />
 <glyph unicode="&#xe960;" glyph-name="control-Html" d="M159.073 285.257l-159.073 134.055 159.073 133.819 36.818-37.29-117.062-96.057 117.062-97.237zM493.247 414.828q0-33.042-9.441-57.115-9.205-24.073-25.961-40.122-16.521-15.813-39.178-23.601-22.657-7.552-49.327-7.552-26.197 0-48.855 4.012-22.421 3.776-42.954 10.385v323.338h57.587v-78.356l-2.36-47.203q12.981 16.757 30.21 26.905 17.465 10.149 41.774 10.149 21.241 0 37.762-8.496t27.614-24.309q11.329-15.577 17.229-37.998 5.9-22.185 5.9-50.035zM432.828 412.468q0 19.825-2.832 33.75t-8.26 22.893q-5.192 8.969-12.981 12.981-7.552 4.248-17.465 4.248-14.633 0-28.086-11.801-13.217-11.801-28.086-32.098v-104.79q6.844-2.596 16.757-4.248 10.149-1.652 20.533-1.652 13.689 0 24.781 5.664 11.329 5.664 19.117 16.049 8.024 10.385 12.273 25.253 4.248 15.105 4.248 33.75zM700.682 437.249q0.472 13.453-1.416 22.893-1.652 9.441-5.664 15.577-3.776 6.136-9.441 8.968t-12.981 2.832q-12.745 0-26.433-10.621-13.453-10.385-29.738-34.458v-151.756h-59.003v239.789h52.159l2.124-34.93q5.9 9.205 13.217 16.521 7.552 7.316 16.521 12.509 9.205 5.428 20.297 8.26t24.309 2.832q18.173 0 32.098-6.372 14.161-6.136 23.601-18.409 9.677-12.273 14.161-30.918 4.72-18.409 4.012-42.718zM864.927 553.132l159.073-133.819-159.073-134.055-36.582 37.29 116.826 96.293-116.826 97.001z" />
+<glyph unicode="&#xe961;" glyph-name="drag2" d="M170 298.667v86h684v-86h-684zM854 554.667v-86h-684v86h684z" />
 <glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
 <glyph unicode="&#xf00a;" glyph-name="grid" d="M292.571 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf0c9;" glyph-name="list1" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />

src/Squidex/app/theme/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?54f7f7');
-  src:  url('fonts/icomoon.eot?54f7f7#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?54f7f7') format('truetype'),
-    url('fonts/icomoon.woff?54f7f7') format('woff'),
-    url('fonts/icomoon.svg?54f7f7#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?wza1pz');
+  src:  url('fonts/icomoon.eot?wza1pz#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?wza1pz') format('truetype'),
+    url('fonts/icomoon.woff?wza1pz') format('woff'),
+    url('fonts/icomoon.svg?wza1pz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-drag2:before {
+  content: "\e961";
+}
 .icon-comments:before {
   content: "\e95f";
 }