fix: make peer id visibility toggle icon responsive to small resolutions

Merge pull request ambianic#514 from vickywane/updates/mask-peerid
vickywane · Feb 8, 2021 · 1bba341 · 1bba341
2 parents 6e972c4 + 3aea4a0
commit 1bba341
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 25 deletions.
diff --git a/cypress/integration/ambianic-tests/remote-connection.spec.js b/cypress/integration/ambianic-tests/remote-connection.spec.js
@@ -4,7 +4,13 @@
 
 /// <reference types="cypress" />
 
-context('RemoteConnections', () => {
+const checkViewPort = (cy, device) => {
+    cy.viewport(device)
+    cy.get('#toggle-visibility').should('be.visible')
+    cy.get('#peerId-container').should('be.visible')
+}
+
+context('RemoteConnections',    () => {
     beforeEach(() => {
       cy.visit('http://localhost:8080/settings')
     })
@@ -28,4 +34,22 @@ context('RemoteConnections', () => {
         cy.get('#toggle-visibility').click()
         cy.get('#peerId-container').should('have.value', '917d5f0a-6469-4d33-b5c2-efd858118b74')
     })
-})
+
+    it('Displays elements in smaller viewports', () => {
+        cy.get('#remotePeerID').type('917d5f0a-6469-4d33-b5c2-efd858118b74')
+        cy.get('#btn-sendRemotePeerID').click()
+
+        // ensure elements are shown on smaller viewports
+        checkViewPort(cy, 'iphone-5')
+        checkViewPort(cy, 'iphone-6')
+        checkViewPort(cy, 'samsung-s10')
+        checkViewPort(cy, 'samsung-note9')
+        checkViewPort(cy, 'iphone-x')
+        checkViewPort(cy, 'iphone-xr')
+
+        checkViewPort(cy, 'ipad-mini')
+        checkViewPort(cy, 'ipad-2')
+        checkViewPort(cy, 'macbook-11')
+        checkViewPort(cy, 'macbook-13')
+    })
+})
diff --git a/src/components/shared/ListItem.vue b/src/components/shared/ListItem.vue
@@ -7,13 +7,14 @@
       </v-icon>
     </v-list-item-icon>
     <v-list-item-content v-if="sensitiveField">
-      <div style="display : flex; justify-content: space-between">
-        <div style="display : flex; flex-direction: column">
+      <v-row dense>
+        <v-col>
           <v-list-item-title class="headline">
             <input
               :value="title"
               :placeholder="title"
               disabled
+              style="color: #000;"
               id="peerId-container"
               :type="sensitive ? 'password' : 'text'"
             >
@@ -24,24 +25,26 @@
               {{ subtitle }}
             </v-list-item-subtitle>
           </div>
-        </div>
+        </v-col>
 
-        <v-icon
-          style="padding-bottom: 15px"
-          v-if="sensitive"
-          id="toggle-visibility"
-          @click="sensitive = false"
-        >
-          mdi-eye
-        </v-icon>
-        <v-icon
-          style="padding-bottom: 15px"
-          v-else
-          @click="sensitive = true"
-        >
-          mdi-eye-off-outline
-        </v-icon>
-      </div>
+        <v-col>
+          <v-icon
+            style="padding-bottom: 14px"
+            v-if="sensitive"
+            id="toggle-visibility"
+            @click="sensitive = false"
+          >
+            mdi-eye
+          </v-icon>
+          <v-icon
+            style="padding-bottom: 15px"
+            v-else
+            @click="sensitive = true"
+          >
+            mdi-eye-off-outline
+          </v-icon>
+        </v-col>
+      </v-row>
     </v-list-item-content>
 
     <v-list-item-content v-else>

diff --git a/src/views/Onboarding.vue b/src/views/Onboarding.vue
@@ -270,8 +270,7 @@
 
                     <div class="message-container">
                       <v-card-text class="step-text">
-                        Hi Blob, please send me an access invitation to your
-                        Ambianic Edge Device.
+                        {{ invitationMessage }}
                         <br>
                       </v-card-text>
                     </div>
@@ -620,6 +619,7 @@ export default {
       stepLevel: localStorage.getItem('lastOnboardingStage') || 1,
       stepContentName: localStorage.getItem('lastOnboardingStep') || '',
       isInstallingApp: false,
+      invitationMessage: 'Hi ____, please send me an access invitation to your Ambianic Edge Device.',
       appInstallationComplete: false,
       completedSteps: [],
       sendRequestDialog: false,
@@ -693,8 +693,7 @@ export default {
       if (navigator.share) {
         navigator.share({
           title: 'Ambianic Edge Device Access Request',
-          text:
-            'Hi Blob, please send me an access invitation to your Ambianic Edge Device'
+          text: this.invitationMessage
         })
       } else {
         this.sendRequestDialog = state