Move drawer rail collapse action (#2240)

* move rail collapse action to workspace icon * [smoke tests] Run all smoke tests for this branch * remove unnecessary old styles * [smoke tests] Run all smoke tests for this branch * match use of id instead of class for testing [smoke tests] * rename testing ids to be less confusing, these are not toggle clicks * fix drawer and rail z-index stacking to not cover the artilce form [smoke tests]
meedan · Dec 20, 2024 · 86a34a2 · 86a34a2
1 parent 36981c5
commit 86a34a2
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 81 deletions.
diff --git a/localization/react-intl/src/app/components/article/ClaimFactCheckForm.json b/localization/react-intl/src/app/components/article/ClaimFactCheckForm.json
@@ -2,6 +2,6 @@
   {
     "id": "claimFactCheckForm.saveSuccess",
     "description": "Save item action success message",
-    "defaultMessage": "Article created successfully! This new article may take a while to appear up everywhere."
+    "defaultMessage": "Article created successfully! This new article may take a while to appear everywhere."
   }
 ]
diff --git a/localization/react-intl/src/app/components/article/ExplainerForm.json b/localization/react-intl/src/app/components/article/ExplainerForm.json
@@ -2,6 +2,6 @@
   {
     "id": "explainerForm.saveSuccess",
     "description": "Save item action success message",
-    "defaultMessage": "Article created successfully! This new article may take a while to appear up everywhere."
+    "defaultMessage": "Article created successfully! This new article may take a while to appear everywhere."
   }
 ]
diff --git a/localization/react-intl/src/app/components/dashboard/VerticalBarFactChecksByRating.json b/localization/react-intl/src/app/components/dashboard/VerticalBarFactChecksByRating.json
@@ -4,4 +4,4 @@
     "description": "Title for the number of fact-checks by rating widget",
     "defaultMessage": "Claim & Fact-Checks"
   }
-]
+]
diff --git a/src/app/components/bot/PlatformSelect.module.css b/src/app/components/bot/PlatformSelect.module.css
@@ -24,9 +24,6 @@
   gap: 16px;
   padding: 16px;
 
-  /* position: absolute; */
-  z-index: 100;
-
   .flyout-title {
     @mixin typography-body1-bold;
     color: var(--color-gray-75);

diff --git a/src/app/components/drawer/DrawerNavigation.js b/src/app/components/drawer/DrawerNavigation.js
@@ -54,19 +54,18 @@ const DrawerNavigation = (props) => {
           }
           route={route}
         />
-        { drawerOpen ?
-          <Relay.RootContainer
-            Component={DrawerNavigationContainer}
-            renderFetched={
-              data => (<DrawerNavigationContainer
-                drawerOpen={drawerOpen}
-                drawerType={drawerType}
-                {...props}
-                {...data}
-              />)
-            }
-            route={route}
-          /> : null }
+        <Relay.RootContainer
+          Component={DrawerNavigationContainer}
+          renderFetched={
+            data => (<DrawerNavigationContainer
+              drawerOpen={drawerOpen}
+              drawerType={drawerType}
+              {...props}
+              {...data}
+            />)
+          }
+          route={route}
+        />
       </>
     );
   }

diff --git a/src/app/components/drawer/DrawerRail.js b/src/app/components/drawer/DrawerRail.js
@@ -14,7 +14,6 @@ import SettingsIcon from '../../icons/settings.svg';
 // import SmartToyIcon from '../../icons/smart_toy.svg';
 import PersonIcon from '../../icons/person.svg';
 import SharedFeedIcon from '../../icons/dynamic_feed.svg';
-import ChevronRightIcon from '../../icons/chevron_right.svg';
 import ChevronLeftIcon from '../../icons/chevron_left.svg';
 import DescriptionIcon from '../../icons/description.svg';
 import styles from './DrawerRail.module.css';
@@ -134,28 +133,21 @@ const DrawerRail = ({
       {!!team && (currentUserIsMember || !team.private) ? (
         <>
           <div className={styles.drawerRailTop}>
-            <Tooltip arrow placement="right" title={intl.formatMessage(messages.settingsDescription)}>
-              <Link
-                className="team-header__drawer-team-link"
-                to={`/${team.slug}/settings/workspace`}
-              >
-                <TeamAvatar className={styles.teamLogo} size="44px" team={team} />
-              </Link>
-            </Tooltip>
             <Tooltip arrow placement="right" title={intl.formatMessage(messages.railToggleDescription)}>
               <button
                 className={cx(
-                  [styles.railIconButton],
+                  [styles.railToggleButton],
                   {
-                    'side-navigation__toggle-open': drawerOpen,
-                    'side-navigation__toggle-closed': !drawerOpen,
+                    [styles.railToggleButtonClosed]: !drawerOpen,
                   })
                 }
-                id="side-navigation__toggle"
                 type="button"
                 onClick={() => setDrawerOpenChange()}
               >
-                {drawerOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                <div className={styles.railIconLink}>
+                  <ChevronLeftIcon />
+                </div>
+                <TeamAvatar className={styles.teamLogo} size="44px" team={team} />
               </button>
             </Tooltip>
             <ContentFilterControls />
@@ -171,7 +163,7 @@ const DrawerRail = ({
                     [styles.railIconLinkActive]: isBotBuilder,
                   })
                 }
-                id="side-navigation__bot-toggle"
+                id="side-rail__bot"
                 to={`/${team.slug}/bot`}
                 onClick={() => setDrawerTypeChange('bot')}
               >
@@ -186,7 +178,7 @@ const DrawerRail = ({
                     [styles.railIconLinkActive]: isArticlePage,
                   })
                 }
-                id="side-navigation__article-toggle"
+                id="side-rail__articles"
                 to={`/${team.slug}/articles/fact-checks`}
                 onClick={() => setDrawerTypeChange('articles')}
               >
@@ -201,7 +193,7 @@ const DrawerRail = ({
                     [styles.railIconLinkActive]: isTipline,
                   })
                 }
-                id="side-navigation__tipline-toggle"
+                id="side-rail__tipline"
                 to={`/${team.slug}/all-items`}
                 onClick={() => setDrawerTypeChange('tipline')}
               >
@@ -216,7 +208,7 @@ const DrawerRail = ({
                     [styles.railIconLinkActive]: isFeedPage,
                   })
                 }
-                id="side-navigation__feed-toggle"
+                id="side-rail__shared-feed"
                 to={`/${team.slug}/feeds`}
                 onClick={() => setDrawerTypeChange('feed')}
               >
@@ -231,6 +223,7 @@ const DrawerRail = ({
                     [styles.railIconLinkActive]: isSettingsPage,
                   })
                 }
+                id="side-rail__workspace-settings"
                 to={`/${team.slug}/settings/workspace`}
                 onClick={() => setDrawerTypeChange('settings')}
               >
@@ -240,12 +233,12 @@ const DrawerRail = ({
             <Tooltip arrow placement="right" title={intl.formatMessage(messages.userSettingsDescription)}>
               <Link
                 className={cx(
-                  'user-menu__avatar',
                   [styles.railIconLink],
                   {
                     [styles.railIconLinkActive]: isUserSettingsPage,
                   })
                 }
+                id="side-rail__user-settings"
                 to="/check/me/profile"
                 onClick={() => setDrawerTypeChange('user')}
               >

diff --git a/src/app/components/drawer/DrawerRail.module.css b/src/app/components/drawer/DrawerRail.module.css
@@ -9,30 +9,8 @@
   padding: 15px 0;
   text-align: center;
   width: var(--drawerRailWidth);
-  z-index: var(--z-index-2);
+  z-index: var(--z-index-5);
 
-  .drawerRailTop,
-  .drawerRailMiddle,
-  .drawerRailBottom {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-    width: var(--drawerRailWidth);
-  }
-
-  .drawerRailTop,
-  .drawerRailBottom {
-    gap: 16px;
-  }
-
-  .drawerRailMiddle {
-    align-self: center;
-    flex: 1 1 100%;
-    justify-content: center;
-  }
-
-  .railIconButton,
   .railIconLink {
     background-color: var(--color-beige-86);
     border: 0;
@@ -52,6 +30,7 @@
     }
 
     &:hover {
+      background-color: var(--color-beige-93);
       color: var(--color-gray-15);
     }
 
@@ -61,17 +40,73 @@
     }
   }
 
-  /* stylelint-disable-next-line no-descending-specificity */
-  .railIconButton {
-    background-color: var(--color-beige-93);
+  .drawerRailTop,
+  .drawerRailMiddle,
+  .drawerRailBottom {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    width: var(--drawerRailWidth);
   }
 
-  /* stylelint-disable no-descending-specificity */
-  .railIconLink:not(.railIconLinkActive) {
-    background-color: var(--color-beige-86);
+  .drawerRailTop {
+    gap: 16px;
 
-    &:hover {
-      background-color: var(--color-beige-93);
+    .railToggleButton {
+      border: 0;
+      border-radius: var(--border-radius-default);
+      cursor: pointer;
+      display: block;
+      font-size: var(--drawerRailIcon);
+      height: 44px;
+      padding: 0;
+      position: relative;
+      width: 44px;
+
+      .railIconLink {
+        background-color: var(--color-beige-93);
+        bottom: 0;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: opacity 200ms cubic-bezier(0, 0, .2, 1) 0ms;
+        width: 100%;
+        z-index: var(--z-index-1);
+
+        &:hover {
+          color: var(--color-purple-61);
+        }
+      }
+
+      &.railToggleButtonClosed {
+        .railIconLink {
+          transform: scaleX(-1);
+        }
+      }
+    }
+  }
+
+  .drawerRailBottom {
+    gap: 3px;
+  }
+
+  .drawerRailMiddle {
+    align-self: center;
+    flex: 1 1 100%;
+    justify-content: center;
+  }
+
+  &:hover {
+    .drawerRailTop {
+      .railToggleButton {
+        .railIconLink {
+          opacity: 1;
+        }
+      }
     }
   }
 }
diff --git a/test/spec/app_spec_helpers.rb b/test/spec/app_spec_helpers.rb
@@ -148,14 +148,14 @@ def console_logs
 
   def create_media(url, wait_for_creation = true)
     # show the side navigation for workspace tipline
-    wait_for_selector('#side-navigation__tipline-toggle').click
+    wait_for_selector('#side-rail__tipline').click
     wait_for_selector('.projects-list')
     wait_for_selector('.projects-list__all-items').click
     wait_for_selector('#create-media-button__open-button').click
     fill_field('#create-media-input', url)
     press_button('#create-media-button__submit-button')
     wait_for_selector_none('#create-media-input', :css, 1)
-    wait_for_selector('#side-navigation__tipline-toggle').click
+    wait_for_selector('#side-rail__tipline').click
     wait_for_selector('.cluster-card a') if wait_for_creation
   end
 
@@ -170,7 +170,7 @@ def create_image(file)
     wait_for_selector('#create-media-dialog-form .int-uploadfile__dropzone-with-file')
     wait_for_selector('#create-media-button__submit-button').click
     wait_for_selector_none('#create-media-dialog-form .int-uploadfile__dropzone-with-file')
-    wait_for_selector('#side-navigation__tipline-toggle').click
+    wait_for_selector('#side-rail__tipline').click
   end
 
   def team_url(path)

diff --git a/test/spec/articles_spec.rb b/test/spec/articles_spec.rb
@@ -2,7 +2,7 @@
   it 'should create and add fact-check to an item and go to the report', bin2: true do
     api_create_claim_and_go_to_search_page
     wait_for_selector('.cluster-card')
-    wait_for_selector('#side-navigation__article-toggle').click
+    wait_for_selector('#side-rail__articles').click
     wait_for_selector('.projects-list__fact-checks')
     wait_for_selector('#new-article-menu__open-button').click
     wait_for_selector('#new-article-button__add-explainer')
@@ -16,7 +16,7 @@
     wait_for_selector_none('#article-form__save-button')
     @driver.navigate.refresh
     wait_for_selector('.article-card')
-    wait_for_selector('#side-navigation__tipline-toggle').click
+    wait_for_selector('#side-rail__tipline').click
     wait_for_selector('#search-input')
     wait_for_selector('.cluster-card').click
     add_article_to_item
@@ -34,7 +34,7 @@
   it 'should create and add explainer to an item', bin2: true do
     api_create_claim_and_go_to_search_page
     wait_for_selector('.cluster-card')
-    wait_for_selector('#side-navigation__article-toggle').click
+    wait_for_selector('#side-rail__articles').click
     wait_for_selector('.projects-list__explainers').click
     wait_for_selector('.list-sort')
     wait_for_selector('#new-article-menu__open-button').click
@@ -47,7 +47,7 @@
     wait_for_selector_none('#article-form__save-button')
     @driver.navigate.refresh
     wait_for_selector('.article-card')
-    wait_for_selector('#side-navigation__tipline-toggle').click
+    wait_for_selector('#side-rail__tipline').click
     wait_for_selector('#search-input')
     wait_for_selector('.cluster-card').click
     add_article_to_item

diff --git a/test/spec/login_spec_helpers.rb b/test/spec/login_spec_helpers.rb
@@ -45,7 +45,7 @@ def reset_password(email)
   end
 
   def logout
-    wait_for_selector('.user-menu__avatar').click
+    wait_for_selector('#side-rail__user-settings').click
     wait_for_selector('.user-menu__logout').click
     wait_for_selector('#login-container').click
   end

diff --git a/test/spec/media_spec.rb b/test/spec/media_spec.rb
@@ -29,7 +29,7 @@ def create_media_depending_on_type(url = nil, media = 1)
     wait_for_selector('#bulk-actions-menu__button').click
     wait_for_selector('.bulk-actions-menu__restore').click
     wait_for_selector('.int-flash-message__toast')
-    wait_for_selector('#side-navigation__tipline-toggle').click
+    wait_for_selector('#side-rail__tipline').click
     wait_for_selector_list_size('.cluster-card', 1, :css)
     expect(@driver.find_elements(:css, '.cluster-card').size == 1).to be(true)
   end

diff --git a/test/spec/team_spec.rb b/test/spec/team_spec.rb
@@ -94,7 +94,7 @@
     expect(@driver.find_elements(:css, 'button#team-details__update-button[disabled=""]').length.zero?).to be(true)
     # do not be able to duplicate team
     expect(@driver.find_elements(:css, 'button#team-details__duplicate-button[disabled=""]').length == 1)
-    wait_for_selector('.team-header__drawer-team-link').click
+    wait_for_selector('#side-rail__workspace-settings').click
   end
 
   it 'should go back to previous team', bin1: true do
@@ -112,7 +112,7 @@
     wait_for_selector("#switch-teams__link-to-#{t2.slug}").click
     wait_for_selector('#add-filter-menu__open-button')
     expect(@driver.current_url.to_s.match(t2.slug).nil?).to be(false)
-    wait_for_selector(".team-header__drawer-team-link[href=\"/#{t2.slug}/settings/workspace\"]")
+    wait_for_selector("#side-rail__workspace-settings[href=\"/#{t2.slug}/settings/workspace\"]")
 
     # Navigate back to first team
     @driver.navigate.to "#{@config['self_url']}/check/me/workspaces"

diff --git a/test/spec/team_spec_helpers.rb b/test/spec/team_spec_helpers.rb
@@ -37,7 +37,7 @@ def select_team(options)
     wait_for_selector("//*[contains(text(), '#{options[:name]}')]", :xpath).click
     wait_for_selector('.projects-list__all-items')
     wait_for_selector('.project__title')
-    wait_for_selector('.team-header__drawer-team-link').click
+    wait_for_selector('#side-rail__workspace-settings').click
     wait_for_selector('.team')
   end
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ @@
         "description": "Title for the number of fact-checks by rating widget",
         "defaultMessage": "Claim & Fact-Checks"
       }
-    ]
+    ]