beginning of migration from external styleguide of Base Input component; inital styling and layout

webapp/components/Editor/Editor.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="editor">
-    <menu-bar :editor="editor" :toggleLinkInput="toggleLinkInput" />
+    <menu-bar :editor="editor" :toggleLinkInput="toggleLinkInput" :toggleToolbarInfo="toggleToolbarInfo"/>
+    <dropdown v-if="seen"></dropdown>
     <editor-content ref="editor" :editor="editor" class="ds-input editor-content" />
     <context-menu ref="contextMenu" />
     <suggestion-list
@@ -32,6 +33,8 @@ import defaultExtensions from './defaultExtensions.js'
 import EventHandler from './plugins/eventHandler.js'
 import Hashtag from './nodes/Hashtag.js'
 import Mention from './nodes/Mention.js'
+import BaseCard from '../_new/generic/BaseCard/BaseCard.vue'
+import Dropdown from '~/components/Dropdown'
 import MenuBar from './MenuBar'
 import ContextMenu from './ContextMenu'
 import SuggestionList from './SuggestionList'
@@ -46,6 +49,7 @@ export default {
     LinkInput,
     MenuBar,
     SuggestionList,
+    BaseCard
   },
   props: {
     users: { type: Array, default: () => null }, // If 'null', than the Mention extention is not assigned.
@@ -268,6 +272,11 @@ export default {
     clear() {
       this.editor.clearContent(true)
     },
+    toggleToolbarInfo(bool){
+      if(bool === true) {
+        
+      }
+    }
   },
 }
 </script>

webapp/components/Editor/MenuBar.vue

@@ -59,6 +59,12 @@
         :onClick="commands.horizontal_rule"
         icon="minus"
       />
+
+      <menu-bar-button
+        icon="question-circle"
+        :onClick="(event) => toggleToolbarInfo(event)"
+      />
+
     </div>
   </editor-menu-bar>
 </template>
@@ -66,15 +72,22 @@
 <script>
 import { EditorMenuBar } from 'tiptap'
 import MenuBarButton from './MenuBarButton'
+import Dropdown from '~/components/Dropdown'
+
 
 export default {
   components: {
     EditorMenuBar,
     MenuBarButton,
+    Dropdown
   },
   props: {
     editor: Object,
     toggleLinkInput: Function,
+    toggleToolbarInfo: Function,
   },
+  methods: {
+    toggle
+  }
 }
 </script>

webapp/components/LoginForm/LoginForm.vue

@@ -20,12 +20,13 @@
           name="email"
           icon="envelope"
         />
-        <ds-input
+        <base-input
           v-model="form.password"
           :disabled="pending"
           :placeholder="$t('login.password')"
           icon="lock"
-          icon-right="question-circle"
+          icon-right="eye"
+          icon-right-secondary="eye"
           name="password"
           type="password"
         />
@@ -49,10 +50,12 @@
 
 <script>
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import BaseInput from '../_new/generic/BaseInput/BaseInput'
 
 export default {
   components: {
     LocaleSwitch,
+    BaseInput
   },
   data() {
     return {
@@ -78,6 +81,9 @@ export default {
         this.$toast.error(this.$t('login.failure'))
       }
     },
+    capsLockDetect () {
+
+    }
   },
 }
 </script>

webapp/components/_new/generic/BaseInput/BaseInput.vue

@@ -0,0 +1,199 @@
+<template>
+   <div class="input-wrapper">
+      <base-icon class="input-icon" v-if="icon" :name="icon" /> 
+      
+      <input
+         class="base-input"
+         :class="[
+            icon && `input-has-icon`,
+            iconRight && `input-has-icon-right`,
+            iconRightSecondary && `input-has-icon-right-secondary`
+         ]"
+         type="type"
+         :placeholder="placeholder"
+         :name="name ? name : model"
+         :disabled="disabled"
+         :value.prop="innerValue"
+         :rows="type === 'textarea' ? rows : null"
+         v-html="type === textarea"
+         @input="handleInput"
+         @focus="handleFocus"
+      />
+      <base-icon 
+         class="input-icon-right"
+         v-if="iconRight" 
+         :name="iconRight" />
+      <base-icon 
+         class="input-icon-right"
+         v-if="iconRightSecondary" 
+         :name="iconRightSecondary" />
+   </div>
+</template>
+
+<script>
+
+import BaseIcon from '../BaseIcon/BaseIcon'
+
+export default {
+   components: {
+      BaseIcon,
+   },
+   props: {
+      type: {
+         type: String, 
+         default: 'text',
+         // validator - check if there is existing value helper
+      },
+      placeholder: {
+         type: String, 
+         default: null
+      },
+      icon: {
+         type: String, 
+         default: null
+      },
+      autofocus: {
+         type: Boolean,
+         default: false
+      },
+      rows: {
+         type: [String, Number],
+         default: 1
+      },
+      iconRight: {
+         type: String, 
+         default: null
+      },
+      iconRightSecondary: {
+         type: String, 
+         default: null
+      }
+   },
+   computed: {
+      tag() {
+         if (this.type === 'textarea') {
+            return 'textarea'
+         }
+         return 'input'
+      }
+   },
+   methods: {
+      handleInput(event) {
+       this.input(event.target.value)
+      },
+      input(value) {
+         this.innerValue = value
+         if (this.$parentForm) {
+         this.$parentForm.update(this.model, value)
+         } else {
+         /**
+            * Fires after user input.
+            * Receives the value as the only argument.
+            *
+            * @event input
+            */
+         this.$emit('input', value)
+         this.validate(value)
+         }
+      },
+      handleFocus() {
+         this.focus = true
+      }
+   }
+}
+</script>
+
+<style lang="scss">
+   .input-wrapper {
+      position: relative;
+      display: flex;
+      appearance: none;
+      box-sizing: border-box;
+      font-size: $input-font-size-base;
+      line-height: $line-height-base;
+      font-family: $font-family-text;
+      width: 100%;
+      padding: $input-padding-vertical $space-x-small;
+      height: $input-height;
+   
+      color: $text-color-base;
+      background: $background-color-base;
+   
+      border: $input-border-size solid $border-color-base;
+      border-radius: $border-radius-base;
+      outline: none;
+      transition: all $duration-short $ease-out;
+
+      
+   } 
+
+   .base-input {
+      border: none;
+      width: 76%;
+
+      &::placeholder {
+         color: $text-color-disabled;
+      }
+
+      .input-has-focus &,
+      &:focus {
+         border-color: $border-color-active;
+         background: $background-color-base;
+      }
+
+      .input-is-disabled &,
+      &:disabled {
+         color: $text-color-disabled;
+         opacity: $opacity-disabled;
+         pointer-events: none;
+         cursor: not-allowed;
+         background-color: $background-color-disabled;
+      }
+   }
+
+   .base-input:focus {
+      outline-width: 0;
+   }
+
+   .input-icon,
+   .input-icon-right {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 6%;
+      align-items: center;
+      justify-content: center;
+      width: $input-height;
+      color: $text-color-softer;
+      transition: color $duration-short $ease-out;
+      pointer-events: none;
+      
+      .input-has-focus & {
+         color: $text-color-base;
+      }
+   }
+
+   /* .input-has-icon-right {
+      padding-right: $input-height;
+
+      .input-size-small & {
+         padding-right: $input-height-small;
+      }
+
+      .input-size-large & {
+         padding-right: $input-height-large;
+      }
+   }
+
+   .input-has-icon-right-secondary {
+      padding-right: $input-height;
+
+      .input-size-small & {
+         padding-right: $input-height-small;
+      }
+
+      .input-size-large & {
+         padding-right: $input-height-large;
+      }
+   } */
+</style>