update CSS in ContributorsEditor

Author: tyminko

config/index.js

@@ -36,6 +36,6 @@ module.exports = {
     // (https://github.com/webpack/css-loader#sourcemaps)
     // In our experience, they generally work as expected,
     // just be aware of this issue when enabling this option.
-    cssSourceMap: false
+    cssSourceMap: true
   }
 }

src/assets/sass/components/_buttons.scss

@@ -13,27 +13,29 @@ $ico-line-w: $one-px;
 $ico-color: $button-icon-color;
 $diagonal-factor: 1.4142135624; // diagonal of a square 1x1 (1.4142135624 is a square root of 1*1+1*1)
 
-@mixin button-plus( $size: $button-height, $line-w: 0.2rem, $rotate: 0, $plus:'true') {
-  $plus-shift-x: ($button-height - $size)/2;
-  $plus-shift-y: $button-height/2 - $line-w/2;
+@mixin plus( $size:$button-height, $line-w:$one-px, $rotate: 0deg, $plus:'true') {
+  $plus-shift-x: -$size/2;
+  $plus-shift-y: - $line-w/2;
+  $deg: $rotate;// * 1deg;
 
   &:before,
-  &:after {
-    content: '';
-    display: block;
+  &:after{
     width: $size;
     height: $size;
-    position: absolute;
+    border: none;
+    top: 50%;
+    left: 50%;
+    transition: all 0.25s;
   }
   &:before {
     border-top: $line-w solid $button-icon-color;
-    transform: translate($plus-shift-x, $plus-shift-y) rotate($rotate);
+    transform: translate($plus-shift-x, $plus-shift-y) rotate($deg);
     transform-origin: top;
   }
   @if ($plus == 'true') {
     &:after {
       border-left: $line-w solid $button-icon-color;
-      transform: translate($plus-shift-y, $plus-shift-x) rotate($rotate);
+      transform: translate($plus-shift-y, $plus-shift-x) rotate($deg);
       transform-origin: left;
     }
   }
@@ -151,13 +153,16 @@ $diagonal-factor: 1.4142135624; // diagonal of a square 1x1 (1.4142135624 is a s
   }
 
   @if $name == plus {
-    @include button-plus($size, $line-w)
+    @include plus($size, $line-w)
 
   } @else if $name == plus-medium {
-    @include button-plus(2rem, $one-px)
+    @include plus($size, $one-px)
 
   } @else if $name == minus {
-    @include button-plus($size, $line-w, 0, 'false')
+    @include plus($size, $line-w, 0deg, 'false');
+
+  } @else if $name == cancel {
+    @include plus($size, $line-w, 45deg);
 
   } @else if $name == up {
     @include button-arrow($size, $line-w)
@@ -166,9 +171,6 @@ $diagonal-factor: 1.4142135624; // diagonal of a square 1x1 (1.4142135624 is a s
     @include button-arrow($size, $line-w);
     transform: rotate(180deg);
 
-  } @else if $name == cancel {
-    @include button-plus(2rem, 0.1rem, 45deg)
-
   } @else if $name == drop-down {
     @include arrowhead(bottom, $size)
 

src/assets/sass/components/_form.scss

@@ -91,6 +91,7 @@ $two-thirds: $module-size / 3 * 2;
 
 .v-select.px {
   font-family: font-family-of($work-sans) !important;
+  cursor: unset;
 
   *{
     border-radius: 0!important;
@@ -99,19 +100,26 @@ $two-thirds: $module-size / 3 * 2;
   .dropdown-toggle{
     display: flex;
     flex-flow: column nowrap;
+
+    & > input{
+      width: calc(100% - #{$two-thirds});
+      height: $two-thirds;
+      line-height: $two-thirds;
+    }
   }
 
   .open-indicator {
     @include button($w: $two-thirds, $h: $two-thirds);
-    @include button-icon(drop-down, $module-size/4);
+    @include button-icon(plus, $module-size/3);
 
     position: absolute !important;
-    right: 0 !important;
+    left: 0 !important;
     bottom: 0 !important;
     pointer-events: all;
+    cursor: pointer !important;
   }
   &.open .open-indicator{
-    @include button-icon(drop-down-open, $module-size/4);
+    @include button-icon(cancel, $module-size/3);
   }
 
   .selected-tag{
@@ -121,7 +129,7 @@ $two-thirds: $module-size / 3 * 2;
     height: $two-thirds;
     line-height: $two-thirds;
     margin: 0;
-    padding: 0 $module-size/4;
+    padding: 0 $module-size/4 0 0;
     background: transparent;
 
     .option:after{
@@ -130,13 +138,15 @@ $two-thirds: $module-size / 3 * 2;
     }
 
     button{
+      order: -1;
       display: inline-block;
       width: $two-thirds;
       height: $two-thirds;
-      opacity: 1;
+      opacity: 0.3;
       min-height: 0;
       min-width: 0;
       font-weight: 300;
+      margin-right: $module-size/8;
 
       &:before{
         content: none;
@@ -149,6 +159,15 @@ $two-thirds: $module-size / 3 * 2;
   input[type="search"]:focus,
   .selected-tag{
     min-height: auto;
+    height: $two-thirds;
+  }
+  input[type="search"],
+  input[type="search"]:focus,
+  ul.dropdown-menu li{
+    padding-left: $two-thirds + $module-size/8;
+    a{
+      padding-left:0;
+    }
   }
 
   .focused{
@@ -174,9 +193,11 @@ $two-thirds: $module-size / 3 * 2;
   }
 }
 .inline-select{
+  $h: $module-size/2;
   font-size: $font-size-caption;
-  height: 100%;
+  height: $h;
   display: inline-block;
+  margin-top: ($two-thirds - $h)/2;
   position: relative;
 
   .dropdown-toggle{
@@ -185,38 +206,42 @@ $two-thirds: $module-size / 3 * 2;
 
     input[type="search"],
     input[type="search"]:focus {
-      line-height: $two-thirds;
-      height: $two-thirds;
+      line-height: $h;
+      height: $h;
       background: $bg-color;
       width: 0!important;
+      padding: 0;
     }
   }
   ul.dropdown-menu{
     padding: 0 0 0.5em 0!important;
     box-shadow: 0 0 0 1px #575757!important;
-    li a {
-      padding: 0.5em 1em;
+    li {
+      padding-left: 0 !important;
+      a {
+        padding: 0.5em 1em !important;
+      }
     }
   }
   .selected-inline-tag{
     display: block;
+    line-height: $h;
     pointer-events: none;
     cursor: pointer !important;
     padding: 0 $module-size/4;
     background: $bg-secondary-color;
 
-    button.close{
-    }
   }
-
-  &.open{
+  &.open {
+    input[type="search"],
+    input[type="search"]:focus {
+      width: 100%;
+      min-width: 10em;
+      padding: $module-size/4;
+      z-index: 3000;
+    }
     .selected-inline-tag{
       display: none;
     }
-    input[type="search"]{
-      width: 100%!important;
-      min-width: 12em;
-      z-index: 3000;
-    }
   }
 }

src/components/elements/ContributorsEditor.vue

@@ -11,12 +11,9 @@
     <!--
     TODO: interface for setting the Roles of contributors:
     here is an attempt to do so.. an extra inline select..-->
-      <inline-select taggable
-                v-model="option.role"
+      <inline-select
                 :options="roles"
-                :pushTags="true"
-                :placeholder="contributor"
-                class="micro"/>
+                :pushTags="true"/>
     </template>
   </v-select>
 </template>

src/components/elements/SelectInline.vue

@@ -30,12 +30,11 @@
         :class="[isValueEmpty ? 'empty' : 'has-value']"
         autocomplete="false"
         :disabled="disabled"
-        :placeholder="searchPlaceholder"
+        :placeholder="placeholderValue"
         :tabindex="tabindex"
         :readonly="!searchable"
         :id="inputId"
         aria-label="Search for option"
-        value="AAAA"
       />
 
       <slot name="spinner">
@@ -75,10 +74,17 @@
         } else if (this.mutableValue) {
           return [this.mutableValue]
         }
-
         return ['artist']
+      },
+      placeholderValue () {
+        return this.mutableValue ? this.mutableValue : 'artist'
+      },
+      searchPlaceholder () {
+        // if (this.isValueEmpty && this.placeholder) {
+        // return 'AAAA'// this.mutableValue
+        // }
       }/* ,
-      dropdownOpen () { return true } */
+      dropdownOpen () { return false }/**/
     }
   }
 </script>