GUACAMOLE-1740: Merge do not require multiple clicks to begin editing…

… the clipboard.
apache · Aug 25, 2024 · 24883a2 · 24883a2
2 parents fedda30 + ab02023
commit 24883a2
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 24 deletions.
diff --git a/guacamole/src/main/frontend/src/app/clipboard/directives/guacClipboard.js b/guacamole/src/main/frontend/src/app/clipboard/directives/guacClipboard.js
@@ -30,6 +30,7 @@ angular.module('clipboard').directive('guacClipboard', ['$injector',
     const ClipboardData = $injector.get('ClipboardData');
 
     // Required services
+    const $window          = $injector.get('$window');
     const clipboardService = $injector.get('clipboardService');
 
     /**
@@ -53,24 +54,28 @@ angular.module('clipboard').directive('guacClipboard', ['$injector',
          * editor via this DOM element rather than updating a model so that we
          * are prepared for future support of rich text contents.
          *
-         * @type Element
+         * @type {!Element}
          */
-        var element = $element[0].querySelectorAll('.clipboard.active')[0];
+        var element = $element[0].querySelectorAll('.clipboard')[0];
 
         /**
-         * When isActive is set to true then the Clipboard data will be
-         * displayed in the Clipboard Editor. When false, the Clipboard Editor
-         * will not be displayed with Clipboard data.
+         * Whether clipboard contents should be displayed in the clipboard
+         * editor. If false, clipboard contents will not be displayed until
+         * the user manually reveals them.
          *
-         * @type Boolean
+         * @type {!boolean}
          */
-        $scope.isActive = false;
+        $scope.contentsShown = false;
 
         /**
-         * Updates clipboard editor to be active.
+         * Reveals the contents of the clipboard editor, automatically
+         * assigning input focus to the editor if possible.
          */
-        $scope.setActive = function setActive() {
-            $scope.isActive = true;
+        $scope.showContents = function showContents() {
+            $scope.contentsShown = true;
+            $window.setTimeout(function setFocus() {
+                element.focus();
+            }, 0);
         };
 
         /**

diff --git a/guacamole/src/main/frontend/src/app/clipboard/styles/clipboard.css b/guacamole/src/main/frontend/src/app/clipboard/styles/clipboard.css
@@ -58,13 +58,50 @@
     overflow: hidden;
 }
 
-#clipboard-settings .clipboard.active {
+.clipboard-editor {
+    position: relative;
+}
+
+.clipboard-editor .clipboard {
     overflow: auto;
     font-size: 1em;
 }
 
-#clipboard-settings .clipboard.inactive {
+.clipboard-editor .clipboard.clipboard-contents-hidden {
+    color: transparent;
+    overflow: hidden;
+}
+
+.clipboard-editor .clipboard-contents-hidden-hint {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+
+}
+
+.clipboard-editor .clipboard-contents-hidden-hint .clipboard-contents-hidden-hint-text {
+
+    flex: 1;
+
+    background: rgba(0, 0, 0, 0.125);
+    color: #888;
+
+    padding: 0.5em;
     overflow: hidden;
     font-size: 0.9em;
-    opacity: 0.5;
+    text-align: center;
+    font-style: italic;
+
+}
+
+.clipboard-editor .clipboard-contents-hidden-hint:hover .clipboard-contents-hidden-hint-text {
+    text-decoration: underline;
 }
diff --git a/guacamole/src/main/frontend/src/app/clipboard/templates/guacClipboard.html b/guacamole/src/main/frontend/src/app/clipboard/templates/guacClipboard.html
@@ -1,4 +1,12 @@
-<div>
-    <textarea ng-show="isActive" class="clipboard active"></textarea>
-    <textarea ng-show="!isActive" class="clipboard inactive" ng-focus="setActive()">{{'CLIENT.TEXT_CLIPBOARD_AWAITING_FOCUS' | translate}}</textarea>
+<div class="clipboard-editor">
+    <textarea class="clipboard"
+        ng-class="{
+            'clipboard-contents-hidden' : !contentsShown
+        }"
+        ng-disabled="!contentsShown"></textarea>
+    <div class="clipboard-contents-hidden-hint"
+        ng-click="showContents()"
+        ng-show="!contentsShown">
+        <p class="clipboard-contents-hidden-hint-text">{{ 'CLIENT.ACTION_SHOW_CLIPBOARD' | translate }}</p>
+    </div>
 </div>
diff --git a/guacamole/src/main/frontend/src/translations/ca.json b/guacamole/src/main/frontend/src/translations/ca.json
@@ -59,6 +59,7 @@
 
         "ACTION_DISCONNECT"                : "Desconnecta",
         "ACTION_RECONNECT"                 : "Torneu a connectar",
+        "ACTION_SHOW_CLIPBOARD"            : "Feu clic per veure les dades del porta-retalls.",
         "ACTION_UPLOAD_FILES"              : "Carregueu fitxers",
 
         "DIALOG_HEADER_CONNECTING"       : "Connectant",
@@ -143,7 +144,6 @@
         "TEXT_CLIENT_STATUS_DISCONNECTED" : "Heu estat desconnectats.",
         "TEXT_CLIENT_STATUS_UNSTABLE"     : "La connexió de xarxa al servidor Guacamole sembla inestable.",
         "TEXT_CLIENT_STATUS_WAITING"      : "Connectat a Guacamole. Esperant resposta ...",
-        "TEXT_CLIPBOARD_AWAITING_FOCUS"   : "Feu clic per veure les dades del porta-retalls...",
         "TEXT_FILE_TRANSFER_PROGRESS"     : "{PROGRESS} {UNIT, select, b{B} kb{KB} mb{MB} gb{GB} other{}}",
         "TEXT_RECONNECT_COUNTDOWN"        : "Re-conectant en {REMAINING} {REMAINING, plural, one{segon} other{segons}}...",
         "TEXT_USER_JOINED"                : "{USERNAME} s'ha afegit a la connexió.",

diff --git a/guacamole/src/main/frontend/src/translations/cs.json b/guacamole/src/main/frontend/src/translations/cs.json
@@ -71,6 +71,7 @@
         "ACTION_RECONNECT"                 : "Znovu připojit",
         "ACTION_SAVE_FILE"                 : "@:APP.ACTION_SAVE",
         "ACTION_SHARE"                     : "@:APP.ACTION_SHARE",
+        "ACTION_SHOW_CLIPBOARD"            : "Kliknutím zobrazíte obsah schránky.",
         "ACTION_UPLOAD_FILES"              : "Nahrát soubory",
 
         "DIALOG_HEADER_CONNECTING"       : "Připojování",
@@ -163,7 +164,6 @@
         "TEXT_USER_LEFT"                  : "{USERNAME} opustil spojení.",
         "TEXT_RECONNECT_COUNTDOWN"        : "Znovu připojuji  {REMAINING} {REMAINING, plural, one{sekundu} other{sekund}}...",
         "TEXT_FILE_TRANSFER_PROGRESS"     : "{PROGRESS} {UNIT, select, b{B} kb{KB} mb{MB} gb{GB} other{}}",
-        "TEXT_CLIPBOARD_AWAITING_FOCUS"   : "Kliknutím zobrazíte obsah schránky...",
 
         "URL_OSK_LAYOUT" : "layouts/en-us-qwerty.json"
 

diff --git a/guacamole/src/main/frontend/src/translations/de.json b/guacamole/src/main/frontend/src/translations/de.json
@@ -71,6 +71,7 @@
         "ACTION_RECONNECT"                 : "Neu verbinden",
         "ACTION_SAVE_FILE"                 : "@:APP.ACTION_SAVE",
         "ACTION_SHARE"                     : "@:APP.ACTION_SHARE",
+        "ACTION_SHOW_CLIPBOARD"            : "Klicken um Zwischenablage anzuzeigen.",
         "ACTION_UPLOAD_FILES"              : "Dateien hochladen",
 
         "DIALOG_HEADER_CONNECTING"       : "Verbinden",
@@ -163,7 +164,6 @@
         "TEXT_USER_LEFT"                  : "{USERNAME} hat die Verbindung verlassen.",
         "TEXT_RECONNECT_COUNTDOWN"        : "Neuverbindung in {REMAINING} {REMAINING, plural, one{Sekunde} other{Sekunden}}...",
         "TEXT_FILE_TRANSFER_PROGRESS"     : "{PROGRESS} {UNIT, select, b{B} kb{KB} mb{MB} gb{GB} other{}}",
-        "TEXT_CLIPBOARD_AWAITING_FOCUS"   : "Klicken um Zwischenablage anzuzeigen...",
 
         "URL_OSK_LAYOUT" : "layouts/de-de-qwertz.json"
 

diff --git a/guacamole/src/main/frontend/src/translations/en.json b/guacamole/src/main/frontend/src/translations/en.json
@@ -76,6 +76,7 @@
         "ACTION_RECONNECT"                 : "Reconnect",
         "ACTION_SAVE_FILE"                 : "@:APP.ACTION_SAVE",
         "ACTION_SHARE"                     : "@:APP.ACTION_SHARE",
+        "ACTION_SHOW_CLIPBOARD"            : "Click to view clipboard contents.",
         "ACTION_UPLOAD_FILES"              : "Upload Files",
 
         "DIALOG_HEADER_CONNECTING"       : "Connecting",
@@ -168,7 +169,6 @@
         "TEXT_USER_LEFT"                  : "{USERNAME} has left the connection.",
         "TEXT_RECONNECT_COUNTDOWN"        : "Reconnecting in {REMAINING} {REMAINING, plural, one{second} other{seconds}}...",
         "TEXT_FILE_TRANSFER_PROGRESS"     : "{PROGRESS} {UNIT, select, b{B} kb{KB} mb{MB} gb{GB} other{}}",
-        "TEXT_CLIPBOARD_AWAITING_FOCUS"   : "Click to view clipboard data...",
 
         "URL_OSK_LAYOUT" : "layouts/en-us-qwerty.json"
 

diff --git a/guacamole/src/main/frontend/src/translations/fr.json b/guacamole/src/main/frontend/src/translations/fr.json
@@ -64,6 +64,7 @@
         "ACTION_CANCEL"                    : "@:APP.ACTION_CANCEL",
         "ACTION_CLEAR_CLIENT_MESSAGES"     : "@:APP.ACTION_CLEAR",
         "ACTION_CLEAR_COMPLETED_TRANSFERS" : "@:APP.ACTION_CLEAR",
+        "ACTION_SHOW_CLIPBOARD"            : "Cliquez pour afficher le contenu du presse-papiers.",
         "ACTION_CONTINUE"                  : "@:APP.ACTION_CONTINUE",
         "ACTION_DISCONNECT"                : "Déconnecter",
         "ACTION_FULLSCREEN"                : "Plein écran",
@@ -165,7 +166,6 @@
         "TEXT_USER_LEFT"                  : "{USERNAME} a quitté la connexion.",
         "TEXT_RECONNECT_COUNTDOWN"        : "Reconnexion dans {REMAINING} {REMAINING, plural, one{seconde} other{secondes}}...",
         "TEXT_FILE_TRANSFER_PROGRESS"     : "{PROGRESS} {UNIT, select, b{B} kb{KB} mb{MB} gb{GB} other{}}",
-        "TEXT_CLIPBOARD_AWAITING_FOCUS"   : "Cliquez pour afficher le contenu du presse-papiers...",
 
         "URL_OSK_LAYOUT" : "layouts/fr-fr-azerty.json"
 

diff --git a/guacamole/src/main/frontend/src/translations/ja.json b/guacamole/src/main/frontend/src/translations/ja.json
@@ -55,6 +55,7 @@
         "ACTION_RECONNECT"                 : "再接続",
         "ACTION_SAVE_FILE"                 : "@:APP.ACTION_SAVE",
         "ACTION_SHARE"                     : "@:APP.ACTION_SHARE",
+        "ACTION_SHOW_CLIPBOARD"            : "クリックをしてコピー/カットされたテキストが表示されます。",
         "ACTION_UPLOAD_FILES"              : "ファイルアップロード",
 
         "DIALOG_HEADER_CONNECTING"       : "接続",
@@ -132,8 +133,7 @@
         "TEXT_CLIENT_STATUS_DISCONNECTED" : "切断されました。",
         "TEXT_CLIENT_STATUS_UNSTABLE"     : "Guacamoleサーバへのネットワーク接続が不安定です。",
         "TEXT_CLIENT_STATUS_WAITING"      : "Guacamoleサーバに接続しました。応答を待っています",
-        "TEXT_RECONNECT_COUNTDOWN"        : "再接続しています... {REMAINING} {REMAINING, plural, one{second} other{seconds}}...",
-        "TEXT_CLIPBOARD_AWAITING_FOCUS"   : "クリックをしてコピー/カットされたテキストが表示されます..."
+        "TEXT_RECONNECT_COUNTDOWN"        : "再接続しています... {REMAINING} {REMAINING, plural, one{second} other{seconds}}..."
 
     },
 

diff --git a/guacamole/src/main/frontend/src/translations/zh.json b/guacamole/src/main/frontend/src/translations/zh.json
@@ -72,6 +72,7 @@
         "ACTION_RECONNECT"                 : "重新连接",
         "ACTION_SAVE_FILE"                 : "@:APP.ACTION_SAVE",
         "ACTION_SHARE"                     : "@:APP.ACTION_SHARE",
+        "ACTION_SHOW_CLIPBOARD"            : "点击以查看剪贴板内容。",
         "ACTION_UPLOAD_FILES"              : "上传文件",
 
         "DIALOG_HEADER_CONNECTING"       : "正在连接",
@@ -164,7 +165,6 @@
         "TEXT_USER_LEFT"                  : "用户 {USERNAME} 断开了连接。",
         "TEXT_RECONNECT_COUNTDOWN"        : "在 {REMAINING} 秒后重连...",
         "TEXT_FILE_TRANSFER_PROGRESS"     : "{PROGRESS} {UNIT, select, b{B} kb{KB} mb{MB} gb{GB} other{}}",
-        "TEXT_CLIPBOARD_AWAITING_FOCUS"   : "点击以查看剪贴板内容...",
 
         "URL_OSK_LAYOUT" : "layouts/en-us-qwerty.json"