Feat/ga/91 content tree redesign (#130)

* feat(ga): initial css changes * feat(ga): css changes in content tree * feat(ga): css changes * feat(ga): style review changes * feat(ga): style review changes * feat(ga): style review changes * feat(ga): style review changes * feat(ga): changeset * feat(ga): style review changes * feat(ga): changeset Co-authored-by: Christos Koutsiaris <christos.koutsiaris@sap.com>
SAP · Jun 23, 2022 · 8ee2407 · 8ee2407
1 parent 1712cbd
commit 8ee2407
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 113 deletions.
diff --git a/.changeset/poor-bees-pull.md b/.changeset/poor-bees-pull.md
@@ -0,0 +1,6 @@
+---
+'sap-guided-answers-extension': minor
+'@sap/guided-answers-extension-webapp': minor
+---
+
+Redesign details page
diff --git a/packages/webapp/src/webview/i18n/i18n.json b/packages/webapp/src/webview/i18n/i18n.json
@@ -1,7 +1,7 @@
 {
     "GUIDED_ANSWER_HEADER": "Guide",
     "SEARCH_GUIDED_ANSWERS": "Search Guided Answers",
-    "ALL_ANSWERS": "All answers",
+    "ALL_ANSWERS": "Home",
     "STEP_BACK": "Step back",
     "RESTART": "Restart",
     "GUIDED_ANSWERS": "Guided Answers",

diff --git a/packages/webapp/src/webview/ui/components/App/App.scss b/packages/webapp/src/webview/ui/components/App/App.scss
@@ -64,19 +64,24 @@ h1 {
 
 .tree-item {
     margin: 0;
+    background-color: var(--vscode-editor-background);
+    list-style-type: none;
 }
 
 .striped-list {
     padding-left: 0;
-    margin-top: 40px;
+    margin-top: 20px;
 }
 
 ul.striped-list > li:nth-of-type(odd) {
     background-color: var(--vscode-breadcrumbPicker-background);
     padding-left: 0;
 }
 
-li.tree-item {
-    background-color: var(--vscode-editor-background);
-    list-style-type: none;
+.bold-text {
+    font-weight: 800;
+}
+
+.text-hover:hover {
+    text-decoration: underline;
 }
diff --git a/packages/webapp/src/webview/ui/components/App/App.tsx b/packages/webapp/src/webview/ui/components/App/App.tsx
@@ -34,12 +34,16 @@ export function App(): ReactElement {
                                         actions.setActiveTree(tree);
                                         actions.selectNode(tree.FIRST_NODE_ID);
                                     }}>
-                                    <ul className="guided-answer__tree__ul">
-                                        <h3 className="guided-answer__tree__title">{tree.TITLE}</h3>
+                                    <div className="guided-answer__tree__ul">
+                                        <h3
+                                            className="guided-answer__tree__title"
+                                            style={{ marginTop: tree.DESCRIPTION ? '0' : '10px' }}>
+                                            {tree.TITLE}
+                                        </h3>
                                         {tree.DESCRIPTION && (
                                             <span className="guided-answer__tree__desc">{tree.DESCRIPTION}</span>
                                         )}
-                                    </ul>
+                                    </div>
                                 </div>
                             </li>
                         );

diff --git a/packages/webapp/src/webview/ui/components/GuidedAnswerNavPath/GuidedAnswerNavPath.scss b/packages/webapp/src/webview/ui/components/GuidedAnswerNavPath/GuidedAnswerNavPath.scss
@@ -8,70 +8,88 @@ h1 span {
 }
 
 .container {
-    width: 100%;
-    margin-top: 25px;
-    position: relative;
+    width: 25%;
+    margin-top: 10px;
+    position: fixed;
     overflow: hidden;
-    padding-left: 20px;
-    padding-right: 20px;
 }
 
 .vertical-line {
-    display: block;
-    left: 9px;
     width: 1px;
-    position: absolute;
-    top: 47px;
-    margin-left: -1px;
-    height: 55px;
-    background: lightgray;
-    z-index: 1;
+    margin-left: 50%;
+    height: 10px;
+    background: var(--vscode-editorWidget-border);
+    z-index: -1;
+    margin-top: -10px;
 }
 
 .timeline-block {
     width: 100%;
-    margin: 0px 0px 0px 10px;
     display: flex;
     justify-content: space-between;
     clear: both;
     position: relative;
     float: none;
-    height: 80px;
-}
-
-.marker {
-    position: absolute;
-    top: 20px;
-    font-size: 20px;
+    flex-direction: column;
 }
 
 .timeline-content {
     width: 100%;
-    margin: 10px 10px 10px 35px;
-    border: 1px solid lightgray;
-    color: #666;
+    margin: 0px 10px 10px 0px;
+    border-radius: 3px;
+    color: var(--vscode-foreground);
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    background: var(--vscode-menu-background);
+    border: 1px solid var(--vscode-editorWidget-border);
 }
 
-.timeline-content-arrow {
-    top: 16px;
-    left: -7px;
-    position: relative;
-    width: 0.75rem;
-    height: 0.75rem;
-    background-color: var(--vscode-editor-background);
-    opacity: 1;
-    -moz-opacity: 1;
-    -webkit-opacity: 1;
-    border-bottom: 0.0625rem solid #d1d1d1;
-    border-left: 0.0625rem solid #d1d1d1;
-    transform: translateX(0px) translateY(0px) rotate(45deg);
-    -moz-transform: translateX(0px) translateY(0px) rotate(45deg);
-    z-index: 1;
+.timeline-content:hover {
+    cursor: pointer;
+    background: var(--vscode-list-hoverBackground);
+}
+
+.timeline-content-bottom-border {
+    border-bottom: 3px solid var(--vscode-focusBorder, #007fd4);
 }
 
 .timeline__path {
     display: inline-block;
-    color: var(--vscode-textLink-foreground);
-    cursor: pointer;
-    padding: 1px 7px 2px 18px;
+    color: var(--vscode-menu-foreground, #cccccc);
+    padding: 10px;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    font-style: normal;
+}
+
+.timeline-content-title-large {
+    display: block;
+}
+.timeline-content-title-small {
+    display: none;
+}
+
+@media only screen and (max-width: 625px) {
+    .timeline-content-title-large {
+        display: none;
+    }
+    .timeline-content-title-small {
+        display: block;
+    }
+    .timeline-content {
+        align-items: center;
+    }
+    .vertical-line {
+        left: 46%;
+    }
+    .container {
+        width: 40px;
+    }
+    .timeline__path {
+        width: 34px;
+        text-align: center;
+    }
 }
diff --git a/packages/webapp/src/webview/ui/components/GuidedAnswerNavPath/GuidedAnswerNavPath.tsx b/packages/webapp/src/webview/ui/components/GuidedAnswerNavPath/GuidedAnswerNavPath.tsx
@@ -19,36 +19,23 @@ export function GuidedAnswerNavPath(): ReactElement {
         return (
             <nav className="container">
                 {nodes.map((node, i) => {
-                    let markerIcon: ReactElement | string;
-                    if (node.EDGES.length === 0) {
-                        markerIcon = '▷';
-                    } else {
-                        markerIcon =
-                            i === lastIndex ? (
-                                <span
-                                    aria-label="check mark"
-                                    role="img"
-                                    style={{ color: 'var(--vscode-textLink-foreground)' }}>
-                                    ▷
-                                </span>
-                            ) : (
-                                '☑'
-                            );
-                    }
                     return (
                         <div key={`timeline-block-${i}`} className="timeline-block">
-                            {i !== lastIndex ? <div className="vertical-line"></div> : <></>}
-                            <div className="marker">{markerIcon}</div>
-                            <div className="timeline-content">
-                                <div className="timeline-content-arrow"></div>
-                                <div
-                                    className="timeline__path"
-                                    onClick={(): void => {
-                                        actions.updateActiveNode(node);
-                                    }}>
-                                    {node.TITLE}
+                            <div
+                                className={`timeline-content ${
+                                    i === lastIndex ? 'timeline-content-bottom-border' : ''
+                                }`}
+                                onClick={(): void => {
+                                    actions.updateActiveNode(node);
+                                }}>
+                                <div className="timeline__path" title={node.TITLE}>
+                                    <span className="timeline-content-title-small bold-text">{i + 1}</span>
+                                    <span className={`timeline-content-title-large ${i === 0 ? 'bold-text' : ''}`}>
+                                        {node.TITLE}
+                                    </span>
                                 </div>
                             </div>
+                            {i !== lastIndex ? <div className="vertical-line"></div> : <></>}
                         </div>
                     );
                 })}

diff --git a/packages/webapp/src/webview/ui/components/GuidedAnswerNode/GuidedAnswerNode.scss b/packages/webapp/src/webview/ui/components/GuidedAnswerNode/GuidedAnswerNode.scss
@@ -16,13 +16,8 @@ section.answer__node__body {
 
 #left {
     height: 100%;
-    width: 400px;
-    position: fixed;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    overflow-x: hidden;
-    padding-top: 45px;
+    width: 25%;
+    margin-right: 80px;
 }
 
 .main-container {
@@ -31,20 +26,19 @@ section.answer__node__body {
 
 #middle {
     display: flex;
-    grid-area: content;
-    overflow-x: hidden;
-    position: relative;
-    left: 0;
-    transition: left 0.5s;
-    flex-grow: 1;
-    margin-left: 380px;
-    padding-right: 20px;
     max-width: 620px;
+    width: 75%;
+    align-content: flex-start;
+
+    .content > * {
+        line-height: 18px;
+    }
 }
 
-hr {
+#hr {
     width: 100%;
-    border: 1px solid var(--vscode-editorWidget-border);
+    border-bottom: 1px solid var(--vscode-editorWidget-border);
+    padding-bottom: 10px;
 }
 
 #middle-with-command {
@@ -72,6 +66,7 @@ hr {
 .guided-answer__node {
     &__body {
         color: var(--vscode-foreground);
+        display: flex;
     }
     &__question {
         color: var(--vscode-settings-headerForeground);
@@ -92,9 +87,14 @@ hr {
         height: auto;
         line-height: 18px;
         letter-spacing: 0em;
-        margin: 1em;
-        padding: 1em;
+        margin: 10px 0;
+        padding: 10px;
         text-align: center;
+        outline-offset: -1px;
+        outline: 1px solid var(--vscode-contrastBorder);
+    }
+    &__edge:hover {
+        background-color: var(--vscode-button-hoverBackground);
     }
     &__commands {
         position: fixed;
@@ -146,3 +146,13 @@ hr {
     cursor: pointer;
     text-decoration: underline;
 }
+
+@media only screen and (max-width: 625px) {
+    #middle {
+        width: 100%;
+    }
+
+    #left {
+        width: auto;
+    }
+}
diff --git a/packages/webapp/src/webview/ui/components/GuidedAnswerNode/GuidedAnswerNode.tsx b/packages/webapp/src/webview/ui/components/GuidedAnswerNode/GuidedAnswerNode.tsx
@@ -95,8 +95,12 @@ function getContent(activeNode: GuidedAnswerNodeType): ReactElement {
     const middle = (
         <div id="middle" className="column">
             <h1>{activeNode.TITLE}</h1>
-            <hr />
-            {enhancedBody ? enhancedBody : <div dangerouslySetInnerHTML={{ __html: activeNode.BODY }}></div>}
+            <div id="hr"></div>
+            {enhancedBody ? (
+                enhancedBody
+            ) : (
+                <div className="content" dangerouslySetInnerHTML={{ __html: activeNode.BODY }}></div>
+            )}
             <p className="guided-answer__node__question">{activeNode.QUESTION}</p>
             <div className="guided-answer__node">
                 {activeNode.EDGES.map((edge, index) => (