added UXSO feedback changes

aws · Dec 1, 2022 · 68aee58 · 68aee58
1 parent 71bde6b
commit 68aee58
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@aws/mynah-ui",
   "displayName": "AWS Mynah UI",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "AWS Mynah UI",
   "publisher": "aws-mynah",
   "license": "Apache License 2.0",

diff --git a/src/components/context-item.ts b/src/components/context-item.ts
@@ -38,16 +38,6 @@ export class ContextPill {
                           }
                         : {},
                     children: [
-                        ...((props.showRemoveButton ?? false) && props.context.type !== ContextTypes.SHOULD
-                            ? [
-                                  new Icon({
-                                      icon:
-                                          props.context.type === ContextTypes.MUST
-                                              ? MynahIcons.OK_CIRCLED
-                                              : MynahIcons.BLOCK,
-                                  }).render,
-                              ]
-                            : []),
                         { type: 'span', innerHTML: props.context.context },
                         ...(props.showRemoveButton ?? false
                             ? [

diff --git a/src/components/prioritization-menu.ts b/src/components/prioritization-menu.ts
@@ -37,7 +37,6 @@ export class PrioritizationMenuButtons {
                                 cancelEvent(e)
                                 this.handlePrioritizationButtonClick.apply(this, [ContextTypes.MUST])
                             },
-                            icon: new Icon({ icon: MynahIcons.OK_CIRCLED }).render,
                             label: DomBuilder.getInstance().build({
                                 type: 'span',
                                 innerHTML: `Must have&nbsp;<b>${this.props.context.context}</b>`,
@@ -60,7 +59,6 @@ export class PrioritizationMenuButtons {
                                 cancelEvent(e)
                                 this.handlePrioritizationButtonClick.apply(this, [ContextTypes.MUST_NOT])
                             },
-                            icon: new Icon({ icon: MynahIcons.BLOCK }).render,
                             label: DomBuilder.getInstance().build({
                                 type: 'span',
                                 innerHTML: `Without&nbsp;<b>${this.props.context.context}</b>`,

diff --git a/src/components/suggestion-card/suggestion-card-header.ts b/src/components/suggestion-card/suggestion-card-header.ts
@@ -25,7 +25,7 @@ export class SuggestionCardHeader {
             .slice(0, 3)
         this.render = DomBuilder.getInstance().build({
             type: 'div',
-            classNames: ['mynah-card-header'],
+            classNames: ['mynah-card-header', ...(props.metaData ? ["mynah-card-header-with-source-thumbnail"] : [])],
             children: [
                 ...(props.metaData ? [{
                     type: "span",
@@ -51,7 +51,11 @@ export class SuggestionCardHeader {
                         {
                             type: 'div',
                             classNames: ['mynah-card-title'],
-                            children: [props.title],
+                            children: [props.title, {
+                                type: 'div',
+                                classNames: ['mynah-card-expand-icon'],
+                                children: [new Icon({ icon: MynahIcons.EXTERNAL }).render],
+                            }],
                         },
                         {
                             type: 'a',
@@ -69,11 +73,6 @@ export class SuggestionCardHeader {
                         ...(props.metaData ? [this.getSourceMetaBlock(props.metaData)] : []),
                     ],
                 },
-                {
-                    type: 'div',
-                    classNames: ['mynah-card-expand-icon'],
-                    children: [new Icon({ icon: MynahIcons.EXTERNAL }).render],
-                },
             ],
         })
     }

diff --git a/src/helper/date-time.ts b/src/helper/date-time.ts
@@ -65,6 +65,5 @@ export const getTimeDiff = (differenceInMs: number, show?: {
     if (show && typeof show === "number") {
         combined.splice(show, combined.length);
     }
-    console.log(combined);
     return combined.join(separator ?? " ");
 }
diff --git a/src/main.ts b/src/main.ts
@@ -260,10 +260,17 @@ export class MynahUI {
                     this.handleContentUpdate(suggestions)
                 }
             })
-            .catch((err: Error) => {
-                console.warn(err)
+            .catch((error: Error) => {
                 this.searchCard.setWaitState(false)
-                this.mainContainer.updateCards([])
+                this.mainContainer.updateCards([]);
+                console.warn(error);
+                new Notification({
+                    content: error.message ?? "An error occured",
+                    title: "Something went wrong",
+                    duration: 5000,
+                    onNotificationClick: () => { },
+                    type: NotificationType.ERROR
+                }).notify();
             })
     }
 

diff --git a/src/static.ts b/src/static.ts
@@ -39,7 +39,7 @@ export interface ServiceConnector {
         text: string,
         currSelected?: number,
         suggestionCount?: number
-    ) => void
+    ) => void,
 }
 export interface StateManager {
     getState: () => Record<string, any>

diff --git a/src/styles/_dark.scss b/src/styles/_dark.scss
@@ -1,14 +0,0 @@
-body.vscode-dark {
-    --mynah-color-light: rgba(255, 255, 255, 0.05);
-    --mynah-color-border-default: rgba(255, 255, 255, 0.1);
-
-    --mynah-color-context-must-contain: #6c9177;
-    --mynah-color-context-must-not-contain: #ca6046;
-    --mynah-color-context-reverse: rgba(255, 255, 255, 0.5);
-    --mynah-color-context-filter: 200%;
-
-    --mynah-color-highlight: #715c3f;
-    --mynah-color-highlight-text: #ffe6a9;
-
-    --mynah-shadow-prioritization-menu: 0 10px 20px -10px rgba(0, 0, 0, 1);
-}

diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
@@ -109,15 +109,28 @@
             max-width: 100%;
             overflow: hidden;
             cursor: pointer;
-            &:hover ~ .mynah-card-expand-icon {
-                opacity: 1;
-                transform: translate3d(0, 0, 0) scale(1);
+            &:hover > .mynah-card-title > .mynah-card-expand-icon {
+                opacity: 0.75;
             }
             > .mynah-card-title {
                 font-size: var(--mynah-font-size-xlarge);
                 font-weight: 700;
                 color: var(--mynah-color-text-strong);
                 width: 100%;
+                display: inline-flex;
+                flex-flow: row nowrap;
+                align-items: center;
+                justify-content: flex-start;
+                gap: var(--mynah-sizing-2);
+                > .mynah-card-expand-icon {
+                    transition: var(--mynah-short-transition-rev);
+                    opacity: 0;
+                    font-size: var(--mynah-font-size-xsmall);
+                    display: inline;
+                    padding: var(--mynah-sizing-1);
+                    border: 1px solid currentColor;
+                    border-radius: 2px;
+                }
             }
             > .mynah-card-url {
                 font-size: var(--mynah-font-size-medium);
@@ -194,13 +207,9 @@
                 }
             }
         }
-        > .mynah-card-expand-icon {
-            color: var(--mynah-color-border-default);
-            align-self: flex-start;
-            transition: var(--mynah-short-transition-rev);
-            opacity: 0;
-            transform: translate3d(0, 0, 0) scale(0.5);
-            font-size: var(--mynah-font-size-large);
+
+        &.mynah-card-header-with-source-thumbnail + .mynah-card-context-wrapper > .mynah-card-tags {
+            padding-left: var(--mynah-sizing-14);
         }
     }
     > .mynah-card-center {
@@ -328,7 +337,6 @@
             display: inline-flex;
             flex-wrap: wrap;
             gap: var(--mynah-sizing-3);
-            padding-left: var(--mynah-sizing-14);
         }
         > .mynah-card-badges {
             display: inline-flex;

diff --git a/src/styles/components/_context-pill.scss b/src/styles/components/_context-pill.scss
@@ -31,7 +31,7 @@
         }
     }
     &:before {
-        content: '';
+        content: "";
         position: absolute;
         left: 0;
         width: calc(100% + var(--mynah-sizing-9));
@@ -64,7 +64,7 @@
         }
         > .mynah-context-checkbox-label {
             &:after {
-                opacity: 1;
+                opacity: 1 !important;
             }
         }
     }
@@ -78,6 +78,10 @@
         > .mynah-context-checkbox-label {
             background: var(--mynah-color-context-must-contain);
             color: var(--mynah-color-context-reverse);
+            @include lighten-darken();
+            &:after {
+                opacity: 0.5;
+            }
         }
     }
     &.mynah-should-contain {
@@ -86,8 +90,10 @@
         > .mynah-context-checkbox-label {
             background: var(--mynah-color-context-should-contain);
             color: var(--mynah-color-context-reverse);
-
             @include lighten-darken();
+            > span {
+                opacity: 0.75;
+            }
         }
     }
     &.mynah-must-not-contain {
@@ -100,6 +106,10 @@
             background: var(--mynah-color-context-must-not-contain);
             color: var(--mynah-color-context-reverse);
             text-decoration: line-through;
+            font-style: italic;
+            > span {
+                opacity: 0.5;
+            }
         }
     }
 }
@@ -164,7 +174,7 @@
         align-items: center;
         cursor: pointer;
         &:before {
-            content: '';
+            content: "";
             position: absolute;
             background-color: currentColor;
             transition: var(--mynah-short-transition);
@@ -192,7 +202,7 @@
     }
     &:after {
         pointer-events: none;
-        content: '';
+        content: "";
         transition: var(--mynah-short-transition-rev);
         position: absolute;
         top: 0;
@@ -204,7 +214,7 @@
         z-index: 10;
         border-radius: var(--mynah-button-radius);
         border: var(--mynah-button-border-width) solid currentColor;
-        opacity: 0;
+        opacity: 0.15;
     }
 
     &#add-new-context {

diff --git a/src/styles/components/_prioritization-menu.scss b/src/styles/components/_prioritization-menu.scss
@@ -18,25 +18,14 @@
         justify-content: flex-start;
         overflow: hidden;
         box-shadow: none;
+        background: var(--mynah-color-context-should-contain);
+        color: var(--mynah-color-context-reverse);
+        > span {
+            padding-left: 0;
+        }
         > i {
             font-size: var(--mynah-font-size-medium);
             margin-left: calc(-1 * var(--mynah-sizing-1));
         }
-        &.mynah-must-contain {
-            background: var(--mynah-color-context-must-contain);
-            color: var(--mynah-color-context-reverse);
-        }
-        &.mynah-should-contain {
-            background: var(--mynah-color-context-should-contain);
-            color: var(--mynah-color-context-reverse);
-            > span {
-                padding-left: 0;
-            }
-            @include lighten-darken();
-        }
-        &.mynah-must-not-contain {
-            background: var(--mynah-color-context-must-not-contain);
-            color: var(--mynah-color-context-reverse);
-        }
     }
 }