Update

Author: fabienSvstr

client/src/components/users/UserListItem.vue

@@ -65,10 +65,19 @@
         <ion-text class="cell user-mobile-text__email">
           {{ user.humanHandle.email }}
         </ion-text>
-        <tag-profile
-          :profile="user.currentProfile"
-          class="user-mobile-text__profile"
-        />
+        <div class="user-mobile-text__profile-status">
+          <tag-profile
+            :profile="user.currentProfile"
+            class="user-mobile-text__profile"
+          />
+          <user-status-tag
+            :revoked="user.isRevoked()"
+            :frozen="user.isFrozen()"
+            :show-tooltip="true"
+            v-if="!user.isActive()"
+            class="user-mobile-text__status"
+          />
+        </div>
       </div>
     </div>
 
@@ -106,7 +115,7 @@
     <!-- options -->
     <div class="user-options ion-item-child-clickable">
       <ion-button
-        v-show="((isHovered || menuOpened) && !user.isCurrent) || isSmallDisplay"
+        v-show="((isHovered || menuOpened || isSmallDisplay) && !user.isCurrent)"
         fill="clear"
         class="options-button"
         @click.stop="onOptionsClick($event)"
@@ -206,6 +215,11 @@ async function onOptionsClick(event: Event): Promise<void> {
     &__email {
       color: var(--parsec-color-light-secondary-grey);
     }
+
+    &__profile-status {
+      display: flex;
+      gap: 0.5rem;
+    }
   }
 }
 

client/src/theme/components/list.scss

@@ -275,7 +275,7 @@
     }
   }
 
-  .label-status,
+  .label-status:not(.user-mobile-text__status),
   .user-status {
     flex: 0 0 8rem;
 

client/tests/e2e/specs/documents_list.spec.ts

@@ -55,37 +55,6 @@ for (const displaySize of ['small', 'large']) {
   });
 }
 
-for (const displaySize of ['small', 'large']) {
-  msTest(`Documents page default state on ${displaySize} display`, async ({ home, documents }) => {
-    if (displaySize === 'small') {
-      const viewport = home.viewportSize();
-      await home.setViewportSize({ width: 700, height: viewport ? viewport.height : 700 });
-    }
-
-    const actionBar = documents.locator('#folders-ms-action-bar');
-    await expect(actionBar.locator('.ms-action-bar-button:visible')).toHaveText(['New folder', 'Import']);
-    await expect(actionBar.locator('.counter')).toHaveText('11 items', { useInnerText: true });
-    await expect(actionBar.locator('#select-popover-button')).toHaveText('Name');
-    await expect(actionBar.locator('#grid-view')).toNotHaveDisabledAttribute();
-    await expect(actionBar.locator('#list-view')).toHaveDisabledAttribute();
-    const entries = documents.locator('.folder-container').locator('.file-list-item');
-    await expect(entries).toHaveCount(11);
-    if (displaySize === 'small') {
-      await expect(entries.locator('.file-name').locator('.file-name__label')).toHaveText(NAME_MATCHER_ARRAY);
-      await expect(entries.locator('.data-date')).toHaveText(TIME_MATCHER_ARRAY);
-      await expect(entries.locator('.data-size')).toHaveText(SIZE_MATCHER_ARRAY.slice(2));
-      for (let i = 0; i < (await entries.count()); i++) {
-        const entry = entries.nth(i);
-        await expect(entry.locator('.options-button')).toBeVisible();
-      }
-    } else {
-      await expect(entries.locator('.file-name').locator('.file-name__label')).toHaveText(NAME_MATCHER_ARRAY);
-      await expect(entries.locator('.file-lastUpdate')).toHaveText(TIME_MATCHER_ARRAY);
-      await expect(entries.locator('.file-size')).toHaveText(SIZE_MATCHER_ARRAY);
-    }
-  });
-}
-
 msTest('Check documents in grid mode', async ({ documents }) => {
   await toggleViewMode(documents);
   const entries = documents.locator('.folder-container').locator('.file-card-item');