From 0214d7bfd65d9859648973e7da3533bd9d87b36e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Thuret?= Date: Fri, 8 Oct 2021 18:36:24 +0200 Subject: [PATCH 1/9] add buttons --- app/static/css/main.css | 16 +++++++++------- app/templates/index.html | 29 +++++++++++++++++++++++++---- 2 files changed, 34 insertions(+), 11 deletions(-) diff --git a/app/static/css/main.css b/app/static/css/main.css index 71dd74e..5ebfe14 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -96,7 +96,7 @@ h3.header { } .btn-delete-text:focus, -.btn-copy-translated:focus { +.btn-action:focus { background: none !important; } @@ -107,26 +107,28 @@ h3.header { color: #777; pointer-events: none; } - -.btn-copy-translated { +.actions { position: absolute; - right: 2.75rem; + right: 1.25rem; bottom: 1rem; display: flex; +} + +.btn-action { + display: flex; align-items: center; color: #777; font-size: 0.85rem; background: none; border: none; cursor: pointer; - margin-right: -1.5rem; } -.btn-copy-translated span { +.btn-action span { padding-right: 0.5rem; } -.btn-copy-translated .material-icons { +.btn-action .material-icons { font-size: 1.35rem; } diff --git a/app/templates/index.html b/app/templates/index.html index 327c592..1f6154f 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -149,9 +149,18 @@ Translated text - +
+ + + + +
@@ -265,7 +274,9 @@ output: "", charactersLimit: -1, - copyTextLabel: "Copy text" + copyTextLabel: "Copy text", + + isSuggesting: false, }, mounted: function(){ var self = this; @@ -474,6 +485,16 @@ }, 1500); } }, + suggestTranslation: function(e) { + e.preventDefault(); + + this.isSuggesting = true; + }, + closeSuggestTranslation: function(e) { + e.preventDefault(); + + this.isSuggesting = false; + }, deleteText: function(e){ e.preventDefault(); this.inputText = this.translatedText = this.output = ""; From f5bc2bc3f52aeb295f5571468f9d02557bc0220b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Thuret?= Date: Fri, 8 Oct 2021 19:02:30 +0200 Subject: [PATCH 2/9] fix --- app/static/css/main.css | 7 +++++ app/templates/index.html | 63 +++++++++++++++++++++++++++------------- 2 files changed, 50 insertions(+), 20 deletions(-) diff --git a/app/static/css/main.css b/app/static/css/main.css index 5ebfe14..728093b 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -124,6 +124,13 @@ h3.header { cursor: pointer; } +.btn-blue { + color: #42A5F5; +} +.btn-action:disabled { + color: #777; +} + .btn-action span { padding-right: 0.5rem; } diff --git a/app/templates/index.html b/app/templates/index.html index 1f6154f..758a2b9 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -126,7 +126,7 @@ - +
@@ -134,11 +134,11 @@
+ +
@@ -147,24 +147,26 @@
- + +
- - - +
-
+
-
+
@@ -346,7 +348,7 @@ if (this.charactersLimit !== -1 && this.inputText.length >= this.charactersLimit){ this.inputText = this.inputText.substring(0, this.charactersLimit); } - + // Update "selected" attribute (to overcome a vue.js limitation) // but properly display checkmarks on supported browsers. // Also change the
- - - - -