Paste choosing improve

Author: ivictbor

css/styles.css

@@ -403,8 +403,9 @@
     margin: 5px 0;
 }
 
-.ptro-selector-btn div {
+.ptro-paster-select .ptro-in div {
     font-family: "Open Sans", sans-serif;
+    font-size: 14px;
 }
 
 .ptro-selector-btn:hover {
@@ -426,7 +427,7 @@
 
 .ptro-paster-select .ptro-in {
     display: inline-block;
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0,0,0,0.7);
     padding: 10px;
 }
 .ptro-paster-select-wrapper {
@@ -435,4 +436,9 @@
     left: 0;
     right: 0;
     bottom: 0;
+}
+
+.ptro-paste-label {
+    color: white;
+    margin-bottom: 10px;
 }

js/inserter.js

@@ -1,5 +1,5 @@
 import { tr } from './translation';
-import { genId } from './utils';
+import { genId, KEYS } from './utils';
 
 export default class Inserter {
   constructor() {
@@ -79,7 +79,7 @@ export default class Inserter {
     this.main = main;
     this.worklog = main.worklog;
     this.selector = main.wrapper.querySelector('.ptro-paster-select-wrapper');
-    this.selector.setAttribute('hidden', '');
+    this.cancelChoosing();
     this.img = null;
     Object.keys(this.pasteOptions).forEach((k) => {
       const o = this.pasteOptions[k];
@@ -89,7 +89,7 @@ export default class Inserter {
         } else {
           o.handle(this.img);
         }
-        this.selector.setAttribute('hidden', '');
+        this.cancelChoosing();
       };
     });
     this.loading = false;
@@ -101,6 +101,11 @@ export default class Inserter {
     this.main.worklog.reCaptureState();
   }
 
+  cancelChoosing() {
+    this.selector.setAttribute('hidden', '');
+    this.waitChoice = false;
+  }
+
   loaded(img) {
     this.img = img;
     this.loading = false;
@@ -125,6 +130,13 @@ export default class Inserter {
     img.src = source;
     if (!empty) {
       this.selector.removeAttribute('hidden');
+      this.waitChoice = true;
+    }
+  }
+
+  handleKeyDown(evt) {
+    if (this.waitChoice && evt.keyCode === KEYS.esc) {
+      this.cancelChoosing();
     }
   }
 
@@ -161,8 +173,8 @@ export default class Inserter {
         `<div>${tr(`pasteOptions.${k}`)}</div>` +
       '</button>';
     });
-    return `<div class="ptro-paster-select-wrapper" hidden><div class="ptro-paster-select"><div class="ptro-in">${
-      buttons
-    }</div></div></div>`;
+    return '<div class="ptro-paster-select-wrapper" hidden><div class="ptro-paster-select"><div class="ptro-in">' +
+      `<div class="ptro-paste-label">${tr('pasteOptions.how_to_paste')}</div>${
+        buttons}</div></div></div>`;
   }
 }

js/selecter.js

@@ -156,6 +156,7 @@ export default class PainterroSelecter {
   }
 
   handleKeyDown(evt) {
+    this.main.inserter.handleKeyDown(evt);
     if (this.shown && this.imagePlaced) {
       if (evt.keyCode === KEYS.enter) {
         this.finishPlacing();

js/translation.js

@@ -47,6 +47,7 @@ export class Translation {
           extend_down: 'Extend down',
           extend_right: 'Extend right',
           over: 'Paste over',
+          how_to_paste: 'How to paste?',
         },
       },
     };