Merge branch 'develop' of https://github.com/entrecode/ec.components …

…into develop # Conflicts: # packages/data/src/entry-select/entry-select.component.html
entrecode · Sep 13, 2017 · 7e82fa1 · 7e82fa1
2 parents 891187f + 9242131
commit 7e82fa1
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 72 deletions.
diff --git a/packages/data/src/entry-select/entry-select.component.html b/packages/data/src/entry-select/entry-select.component.html
@@ -1,15 +1,15 @@
 <div *ngIf="selection" class="ec-entry-select">
-  <a (click)="toggle(!active,true)" class="ec-entry-select__placeholder">
-    - Auswählen -
-  </a>
   <ul class="ec-entry-select-selected">
     <li *ngFor="let selected of selection?.items">
-      <span class="pill" (click)="editItem(selected)">
+      <span class="pill removeable" (click)="editItem(selected)">
         {{selected.display()}}
-        <a (click)="removeItem(selected)">&times;</a>
+        <a (click)="removeItem(selected)" class="pill_remove">&times;</a>
       </span>
     </li>
   </ul>
+  <a (click)="toggle(!active,true)" class="ec-entry-select__placeholder">
+    - Auswählen -
+  </a>
   <span class="caret"></span>
   <!-- TODO use entry pop when ready-->
   <ec-pop [ngClass]="getPopClass()" #crudPop>

diff --git a/packages/data/src/files/asset-select/asset-select.component.html b/packages/data/src/files/asset-select/asset-select.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="selection" class="ec-asset-select">
-  <div class="ec-asset-select-upload">
+<div *ngIf="selection" class="ec-asset-select" [class.ec-asset-select_solo]="solo" [class.empty]="!selection.items.length">
+  <div class="ec-asset-select-upload" *ngIf="!selection.items.length || !solo">
     Datei hier ablegen
     <a href="">Hochladen</a>
     <span> oder <a (click)="toggle(!active,true)">Mediathek</a></span>

diff --git a/packages/style/asset-select/_ec-asset-select_default.scss b/packages/style/asset-select/_ec-asset-select_default.scss
@@ -40,9 +40,11 @@
     right: rem(8);
     top: rem(8);
     z-index: 10;
+    display: none;
+    opacity: 0;
 
     a {
-      @extend .btn, .btn.small, .btn.minor;
+      @extend .btn, .btn.small, .btn.mono !optional;
       margin: 0;
     }
 
@@ -56,5 +58,10 @@
     img {
       mix-blend-mode: multiply;
     }
+
+    .ec-asset-card-controls {
+      display: inherit;
+      opacity: 1;
+    }
   }
 }
diff --git a/packages/style/entry-select/_ec-entry-select_default.scss b/packages/style/entry-select/_ec-entry-select_default.scss
@@ -9,6 +9,18 @@
     color: getColor(text, light);
     @include flex-grow(1);
     font-size: 1em;
+    @include order(2);
+  }
+
+  .ec-entry-select-selected {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    @include flexbox;
+    @include flex-wrap(wrap);
+    @include align-items(center);
+    @include flex-grow(0);
+    @include order(1);
   }
 }
 

diff --git a/packages/ui/src/form/default-input/default-input.component.html b/packages/ui/src/form/default-input/default-input.component.html
@@ -1,5 +1,4 @@
 <div [ngSwitch]="field.view" *ngIf="group" [formGroup]="group">
-  <ec-input-errors [control]="group.get(field.property)"></ec-input-errors>
   <input *ngSwitchCase="'string'" type="text" [formControl]="control"
          [placeholder]="field.getPlaceholder()" class="input">
 
@@ -34,4 +33,5 @@
     <ec-output [field]="field" [item]="item"></ec-output>
     <!--<marquee>🚂🚃🚃🚃 {{field.type}}/{{field.view}} input coming soon</marquee>-->
   </div>
+  <ec-input-errors [control]="group.get(field.property)"></ec-input-errors>
 </div>
diff --git a/packages/ui/src/io/input-errors/input-errors.component.html b/packages/ui/src/io/input-errors/input-errors.component.html
@@ -1,5 +1,3 @@
 <ul *ngIf="control?.errors&&control.dirty" class="input-errors">
-  <li *ngFor="let error of getErrors()">
-    {{error.message}}
-  </li>
+  <li *ngFor="let error of getErrors()" class="input-error">{{error.message}}</li>
 </ul>
diff --git a/packages/ui/src/io/input-errors/input-errors.component.scss b/packages/ui/src/io/input-errors/input-errors.component.scss
@@ -1,10 +1,5 @@
-ul {
-  display: inline;
-  margin: 0;
-  padding: 0;
-  li {
-    float: right;
-    list-style: none;
-    color: lightcoral;
-  }
+.input-errors {
+  display: flex;
+  flex-direction: column;
+  margin: 4px 0;
 }
diff --git a/packages/ui/src/select/select.component.scss b/packages/ui/src/select/select.component.scss
@@ -1,51 +0,0 @@
-/*
-.ec-select {
-  margin: 10px 0;
-  position: relative;
-  ul {
-    margin: 0;
-    padding: 5px;
-    list-style: none;
-    li {
-      cursor: pointer
-    }
-  }
-  ul.selected-items {
-    min-height: 40px;
-    li {
-      display: inline-block;
-      padding: 4px 14px;
-      a {
-        opacity: 0;
-      }
-      &:hover a {
-        opacity: 1;
-      }
-      &:first-child {
-        > span {
-          display: block;
-          transition: all 0.3s;
-        }
-      }
-    }
-  }
-
-  ul.available-items {
-    z-index: 1001;
-    border: 1px solid dimgray;
-    position: absolute;
-    width: 100%;
-    background-color: white;
-    top: 45px;
-    &.closed {
-      display: none;
-    }
-    li {
-      padding: 10px;
-      &.hidden {
-        display: none;
-      }
-    }
-  }
-}
-*/