Scroll entire main column all together (#2868)

mozilla · Jun 19, 2023 · 69a2076 · 69a2076
1 parent 5a6f16b
commit 69a2076
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 51 deletions.
diff --git a/translate/public/locale/en-US/translate.ftl b/translate/public/locale/en-US/translate.ftl
@@ -276,9 +276,6 @@ entitydetails-Metadata--context =
 entitydetails-Metadata--placeholder =
     .title = PLACEHOLDER EXAMPLES
 
-entitydetails-Metadata--resource =
-    .title = RESOURCE
-
 entitydetails-Metadata--attribute =
     .title = FLUENT ATTRIBUTE
 

diff --git a/translate/public/locale/fr/translate.ftl b/translate/public/locale/fr/translate.ftl
@@ -111,9 +111,6 @@ entitydetails-Metadata--context =
 entitydetails-Metadata--placeholder =
     .title = EXEMPLES BOUCHE-TROUS
 
-entitydetails-Metadata--resource =
-    .title = RESSOURCE
-
 
 ## Entity Details PluralString
 ## Shows the original string of an entity with plural forms

diff --git a/translate/src/App.css b/translate/src/App.css
@@ -23,7 +23,6 @@
 
 #app > .main-content > .panel-content,
 #app > .main-content > .panel-list {
-  height: 100%;
   position: relative;
 }
 

diff --git a/translate/src/modules/editor/components/Editor.css b/translate/src/modules/editor/components/Editor.css
@@ -3,7 +3,5 @@
   border-bottom: 1px solid #5e6475;
   display: flex;
   flex-direction: column;
-  flex-shrink: 0;
-  min-height: 160px;
   position: relative;
 }
diff --git a/translate/src/modules/entitydetails/components/EntityDetails.css b/translate/src/modules/entitydetails/components/EntityDetails.css
@@ -9,8 +9,8 @@
 }
 
 .entity-details .main-column {
-  display: flex;
-  flex-direction: column;
+  max-height: 100%;
+  overflow-y: auto;
   width: 66.67%;
 }
 

diff --git a/translate/src/modules/entitydetails/components/Metadata.css b/translate/src/modules/entitydetails/components/Metadata.css
@@ -1,13 +1,10 @@
 .metadata {
   background-color: #3f4752;
   color: #aaa;
-  flex-shrink: 0;
   font-size: 12px;
   font-style: italic;
-  height: 20%;
-  min-height: 100px;
+  min-height: 114px;
   line-height: 22px;
-  overflow: auto;
   padding: 10px;
 }
 
@@ -94,3 +91,11 @@
 .metadata .resource-comment button {
   white-space: nowrap;
 }
+
+.metadata .context a {
+  color: #aaa;
+}
+
+.metadata .context a:hover {
+  color: #7bc876;
+}
diff --git a/translate/src/modules/entitydetails/components/Metadata.test.js b/translate/src/modules/entitydetails/components/Metadata.test.js
@@ -65,7 +65,7 @@ describe('<Metadata>', () => {
     );
 
     expect(
-      wrapper.find('#entitydetails-Metadata--resource a.resource-path').text(),
+      wrapper.find('#entitydetails-Metadata--context a.resource-path').text(),
     ).toContain(ENTITY.path);
   });
 

diff --git a/translate/src/modules/entitydetails/components/Metadata.tsx b/translate/src/modules/entitydetails/components/Metadata.tsx
@@ -116,14 +116,6 @@ function ResourceComment({ comment }: { comment: string }) {
   );
 }
 
-function EntityContext({ context }: { context: string }) {
-  return (
-    <Datum className='context' id='context' title='CONTEXT'>
-      {context}
-    </Datum>
-  );
-}
-
 function SourceArray({ source }: { source: string[][] }) {
   return source.length > 1 || (source.length === 1 && source[0]) ? (
     <ul>
@@ -161,6 +153,39 @@ function SourceObject({
   );
 }
 
+const EntityContext = ({
+  entity: { context, path, project },
+  localeCode,
+  navigateToPath,
+}: {
+  entity: Entity;
+  localeCode: string;
+  navigateToPath: (path: string) => void;
+}) => (
+  <Localized id='entitydetails-Metadata--context' attrs={{ title: true }}>
+    <Property title='CONTEXT' className='context'>
+      {context ? (
+        <>
+          {context}
+          <span className='divider'>&bull;</span>
+        </>
+      ) : null}
+      <a
+        href={`/${localeCode}/${project.slug}/${path}/`}
+        onClick={(ev) => {
+          ev.preventDefault();
+          navigateToPath(ev.currentTarget.pathname);
+        }}
+        className='resource-path'
+      >
+        {path}
+      </a>
+      <span className='divider'>&bull;</span>
+      <a href={`/${localeCode}/${project.slug}/`}>{project.name}</a>
+    </Property>
+  </Localized>
+);
+
 /**
  * Component showing metadata of an entity.
  *
@@ -186,14 +211,6 @@ export function Metadata({
 }: Props): React.ReactElement {
   const { code } = useContext(Locale);
 
-  const navigateToPath_ = useCallback(
-    (ev: React.MouseEvent<HTMLAnchorElement>) => {
-      ev.preventDefault();
-      navigateToPath(ev.currentTarget.pathname);
-    },
-    [navigateToPath],
-  );
-
   const openTeamComments = useCallback(() => {
     const teamCommentsTab = commentTabRef.current;
     const index = teamCommentsTab?._reactInternalFiber.index ?? 0;
@@ -216,25 +233,16 @@ export function Metadata({
       <GroupComment comment={entity.group_comment} />
       <ResourceComment comment={entity.resource_comment} key={entity.pk} />
       <FluentAttribute entity={entity} />
-      <EntityContext context={entity.context} />
       {Array.isArray(entity.source) ? (
         <SourceArray source={entity.source} />
       ) : entity.source ? (
         <SourceObject source={entity.source} />
       ) : null}
-      <Localized id='entitydetails-Metadata--resource' attrs={{ title: true }}>
-        <Property title='RESOURCE' className='resource'>
-          <a href={`/${code}/${entity.project.slug}/`}>{entity.project.name}</a>
-          <span className='divider'>&bull;</span>
-          <a
-            href={`/${code}/${entity.project.slug}/${entity.path}/`}
-            onClick={navigateToPath_}
-            className='resource-path'
-          >
-            {entity.path}
-          </a>
-        </Property>
-      </Localized>
+      <EntityContext
+        entity={entity}
+        localeCode={code}
+        navigateToPath={navigateToPath}
+      />
     </div>
   );
 }
diff --git a/translate/src/modules/history/components/History.css b/translate/src/modules/history/components/History.css
@@ -1,13 +1,10 @@
 .history {
   line-height: 22px;
-  overflow: hidden;
 }
 
 .history ul {
-  height: 100%;
   list-style: none;
   margin: 0;
-  overflow: auto;
   padding: 0;
 }
 

diff --git a/translate/src/modules/translationform/components/TranslationForm.css b/translate/src/modules/translationform/components/TranslationForm.css
@@ -1,8 +1,6 @@
 .translationform {
-  height: 100%;
   line-height: 22px;
   padding: 10px;
-  overflow: auto;
 }
 
 .translationform table {