MODUL-1110 - small visuals changes

ulaval · Jul 3, 2019 · def7ce0 · def7ce0
1 parent 5ce2890
commit def7ce0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 8 deletions.
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.html b/src/components/copy-to-clipboard/copy-to-clipboard.html
@@ -1,13 +1,19 @@
-<div>
+<div class="m-copy-to-clipboard">
     <slot name="input"
           :props="inputProps"
           :handlers="inputHandlers">
         <m-textfield v-bind="inputProps"
                      v-on="inputHandlers">
+
+            <template slot="suffix">
+                <slot name="button"
+                      :handlers="buttonHandlers">
+                    <m-link mode="button"
+                            :underline="false"
+                            v-on="buttonHandlers"
+                            class="m-copy-to-clipboard__button">{{labelCopyBtn}}</m-link>
+                </slot>
+            </template>
         </m-textfield>
     </slot>
-    <slot name="button"
-          :handlers="buttonHandlers">
-        <m-button v-on="buttonHandlers">{{ labelCopyBtn }}</m-button>
-    </slot>
 </div>
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.scss b/src/components/copy-to-clipboard/copy-to-clipboard.scss
@@ -0,0 +1,17 @@
+@import 'commons';
+
+.m-copy-to-clipboard {
+    &__button.m-link {
+        padding: 0 4px;
+        border-radius: 8px;
+        transition: background-color $m-transition-duration ease, color $m-transition-duration ease;
+
+        &:hover {
+            background-color: m-color(interactive, lightest);
+        }
+    }
+
+    .m-input-style.m--is-readonly .m-input-style__main {
+        border-style: solid;
+    }
+}
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.ts b/src/components/copy-to-clipboard/copy-to-clipboard.ts
@@ -2,12 +2,13 @@ import ClipboardJs from 'clipboard';
 import { PluginObject } from 'vue';
 import { Component, Prop } from 'vue-property-decorator';
 import { ModulVue } from '../../utils/vue/vue';
-import ButtonPlugin from '../button/button';
 import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
 import I18nPlugin from '../i18n/i18n';
+import LinkPlugin from '../link/link';
 import TextfieldPlugin from '../textfield/textfield';
 import ToastPlugin, { MToastPosition, MToastTimeout } from '../toast/toast';
 import WithRender from './copy-to-clipboard.html';
+import './copy-to-clipboard.scss';
 
 export interface CopyToClipboardInputSupport {
     value: any;
@@ -83,7 +84,7 @@ export class MCopyToClipboard extends ModulVue {
         this.selectText();
         this.$toast.show({
             text: this.$i18n.translate('m-copy-to-clipboard:copied'),
-            position: MToastPosition.TopCenter,
+            position: MToastPosition.BottomLeft,
             timeout: MToastTimeout.xshort
         });
     }
@@ -94,7 +95,7 @@ const CopyToClipboardPlugin: PluginObject<any> = {
         v.component(COPY_TO_CLIPBOARD_NAME, MCopyToClipboard);
         v.use(I18nPlugin);
         v.use(TextfieldPlugin);
-        v.use(ButtonPlugin);
+        v.use(LinkPlugin);
         v.use(ToastPlugin);
     }
 };

diff --git a/src/components/textfield/textfield.html b/src/components/textfield/textfield.html
@@ -52,6 +52,7 @@
                                @click="togglePasswordVisibility"
                                key="passwordIcon"
                                button-size="22px"></m-icon-button>
+                <slot name="suffix"></slot>
             </transition>
         </template>
         <textarea v-if="hasWordWrap"