From aa63f615bc4f4e2b11afc6fc6d27b8985aedb104 Mon Sep 17 00:00:00 2001 From: John Hauck Date: Thu, 18 May 2023 15:53:16 -0600 Subject: [PATCH 1/2] add onboarding image placeholder --- .../public-notification.css | 392 +++++++++--------- .../public-notification.tsx | 18 +- 2 files changed, 216 insertions(+), 194 deletions(-) diff --git a/src/components/public-notification/public-notification.css b/src/components/public-notification/public-notification.css index d54bd0cb8..32625c915 100644 --- a/src/components/public-notification/public-notification.css +++ b/src/components/public-notification/public-notification.css @@ -14,196 +14,202 @@ * limitations under the License. */ - :host { - display: block; - --calcite-input-message-spacing-value: 0; - } - - .align-center { - align-items: center; - } - - .border-bottom-1 { - border-width: 0px; - border-bottom-width: 1px; - border-style: solid; - border-color: var(--calcite-ui-border-3); - } - - .action-bar-size { - height: 3.5rem; - width: 100%; - } - - .w-1-2 { - width: 50%; - } - - .w-1-3 { - width: 33.33%; - } - - .action-center { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-grid-row-align: center; - align-items: center; - -webkit-align-content: center; - align-content: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - justify-content: center; - } - - .width-full { - width: 100%; - } - - .height-full { - height: 100%; - } - - .padding-1 { - padding: 1rem; - } - - .padding-top-sides-1 { - padding-block-start: 1rem; - padding-inline-start: 1rem; - padding-inline-end: 1rem; - } - - .padding-sides-1 { - padding-inline-start: 1rem; - padding-inline-end: 1rem; - } - - .padding-end-1-2 { - padding-inline-end: .5rem; - } - - .padding-top-1-2 { - padding-block-start: .5rem; - } - - .padding-top-1 { - padding-top: 1rem; - } - - .padding-bottom-1 { - padding-bottom: 1rem; - } - - .padding-bottom-1-2 { - padding-bottom: .5rem; - } - - .info-blue { - /* This would be better but not the right color in light theme */ - /* color: var(--calcite-ui-info); */ - - /* This is --calcite-ui-info value for dark theme*/ - color: #00A0FF; - } - - .info-message { - justify-content: center; - display: grid; - } - - .font-bold { - font-weight: bold; - } - - .display-flex { - display: flex; - } - - .display-block { - display: block; - } - - .display-none { - display: none; - } - - .border-bottom { - border-bottom: 1px solid var(--calcite-ui-border-2); - } - - .padding-start-1-2 { - padding-inline-start: 0.5rem; - } - - .list-border { - border: 1px solid var(--calcite-ui-border-2); - } - - .margin-sides-1 { - margin-inline-start: 1rem; - margin-inline-end: 1rem; - } - - .margin-start-1-2 { - margin-inline-start: 0.5rem; - } - - .float-right { - float: right; - } - - .float-right[dir="rtl"] { - float: left; - } - - .float-left { - float: left; - } - - .float-left[dir="rtl"] { - float: right; - } - - .margin-top-0 { - margin-block-start: 0 !important; - } - - .height-1-1-2 { - height: 1.5rem; - } - - .main-background { - background-color: var(--calcite-ui-foreground-2); - } - - .position-right { - position: absolute; - right: 1rem; - } - - .position-right[dir="rtl"] { - position: absolute; - left: 1rem; - } - - .label-margin-0 { - --calcite-label-margin-bottom: 0; - } - - .list-label { - color: var(--calcite-ui-text-1); - } - - .list-label, - .list-description { - font-family: var(--calcite-sans-family); - font-size: var(--calcite-font-size--2); - font-weight: var(--calcite-font-weight-normal); - overflow-wrap: break-word; - word-break: break-word; - } - - .list-description { - margin-block-start: 0.125rem; - color: var(--calcite-ui-text-3); - } +:host { + display: block; + --calcite-input-message-spacing-value: 0; +} + +.align-center { + align-items: center; +} + +.border-bottom-1 { + border-width: 0px; + border-bottom-width: 1px; + border-style: solid; + border-color: var(--calcite-ui-border-3); +} + +.action-bar-size { + height: 3.5rem; + width: 100%; +} + +.w-1-2 { + width: 50%; +} + +.w-1-3 { + width: 33.33%; +} + +.action-center { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-grid-row-align: center; + align-items: center; + -webkit-align-content: center; + align-content: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.width-full { + width: 100%; +} + +.height-full { + height: 100%; +} + +.padding-1 { + padding: 1rem; +} + +.padding-top-sides-1 { + padding-block-start: 1rem; + padding-inline-start: 1rem; + padding-inline-end: 1rem; +} + +.padding-sides-1 { + padding-inline-start: 1rem; + padding-inline-end: 1rem; +} + +.padding-end-1-2 { + padding-inline-end: .5rem; +} + +.padding-top-1-2 { + padding-block-start: .5rem; +} + +.padding-top-1 { + padding-top: 1rem; +} + +.padding-bottom-1 { + padding-bottom: 1rem; +} + +.padding-bottom-1-2 { + padding-bottom: .5rem; +} + +.info-blue { + /* This would be better but not the right color in light theme */ + /* color: var(--calcite-ui-info); */ + + /* This is --calcite-ui-info value for dark theme*/ + color: #00A0FF; +} + +.info-message { + justify-content: center; + display: grid; +} + +.font-bold { + font-weight: bold; +} + +.display-flex { + display: flex; +} + +.display-block { + display: block; +} + +.display-none { + display: none; +} + +.border-bottom { + border-bottom: 1px solid var(--calcite-ui-border-2); +} + +.padding-start-1-2 { + padding-inline-start: 0.5rem; +} + +.list-border { + border: 1px solid var(--calcite-ui-border-2); +} + +.margin-sides-1 { + margin-inline-start: 1rem; + margin-inline-end: 1rem; +} + +.margin-start-1-2 { + margin-inline-start: 0.5rem; +} + +.float-right { + float: right; +} + +.float-right[dir="rtl"] { + float: left; +} + +.float-left { + float: left; +} + +.float-left[dir="rtl"] { + float: right; +} + +.margin-top-0 { + margin-block-start: 0 !important; +} + +.height-1-1-2 { + height: 1.5rem; +} + +.main-background { + background-color: var(--calcite-ui-foreground-2); +} + +.position-right { + position: absolute; + right: 1rem; +} + +.position-right[dir="rtl"] { + position: absolute; + left: 1rem; +} + +.label-margin-0 { + --calcite-label-margin-bottom: 0; +} + +.list-label { + color: var(--calcite-ui-text-1); +} + +.list-label, +.list-description { + font-family: var(--calcite-sans-family); + font-size: var(--calcite-font-size--2); + font-weight: var(--calcite-font-weight-normal); + overflow-wrap: break-word; + word-break: break-word; +} + +.list-description { + margin-block-start: 0.125rem; + color: var(--calcite-ui-text-3); +} + +.img-container { + object-fit: scale-down; + width: 100%; + height: 100%; +} diff --git a/src/components/public-notification/public-notification.tsx b/src/components/public-notification/public-notification.tsx index 6446fba61..c67427fcc 100644 --- a/src/components/public-notification/public-notification.tsx +++ b/src/components/public-notification/public-notification.tsx @@ -618,7 +618,7 @@ export class PublicNotification { {this._getLabel(this._translations.myLists)} {this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1")} - {hasSets ? this._getSelectionSetList() : (null)} + {hasSets ? this._getSelectionSetList() : (this._getOnboardingImage())}
{ this._setPageType(EPageType.SELECT) }} width="full">{this._translations.add}
@@ -626,6 +626,22 @@ export class PublicNotification { ); } + /** + * Display an image to help illustrate the basic workflow of the widget + * + * @returns the image node to display + * @protected + */ + protected _getOnboardingImage(): VNode { + const href = window.location.href; + const url = href.substring(0, href.lastIndexOf('/')); + return ( +
+ +
+ ); + } + /** * Create the selection sets list node for the List page * From b40842f035fa96d7abce3fb12d35959b4fb59c40 Mon Sep 17 00:00:00 2001 From: John Hauck Date: Thu, 18 May 2023 17:08:39 -0600 Subject: [PATCH 2/2] use getAssetPath and add generic image --- src/assets/data/images/generic.png | Bin 0 -> 2675 bytes .../public-notification/public-notification.tsx | 11 ++++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 src/assets/data/images/generic.png diff --git a/src/assets/data/images/generic.png b/src/assets/data/images/generic.png new file mode 100644 index 0000000000000000000000000000000000000000..f95bad757e0a652adc1a47e6e9cbe9b651dc22f8 GIT binary patch literal 2675 zcmeHJ>r+!#5I-Rnl*9y4Awnipt1vB86JQ7m0WBb}5~+2FN+@8cb(9d86!XAHR4^2w z>5OB207i#VIu=l5Y>-C?R6{8uuK|=-0;n{F5JO@xi6K3)b=rTR;}<^MduR8Yv-{iM z-95YCB~qhTJ9{_-09MDwMD7K^K>+|_-%3ZQ@!4ulgP&E|F$dTHU>?{X#06iBCsaCp z8=Da2^aAbVir!LfJ=PC^vukYRu6^8c&3IcD{rLvrUAPXNT{H6*&dgzK_mb=D#CuI1|c?awcDB2p67?G1H7U4Vep-q?TIwXfl{9J?S z&FvF!I;+B00Dzh&M_{4vnNvhZAS@sOu&*5lz$fWw04~^7aX2K{xupaFuDQY}5?3(* z_-T3DG9mw0hTQt`ECHxOlfOE6lxLDgh)JCDor?)K2d;O3U|Io5-cwC)>X#_33||(V z$x~0AOrYKzFk%V!TJ+a66`}|+lGt$0Qi{!v>xz$0v5iXjGa9mp@Vsz8wD^2vFsU|0 zQz2Dm3Z}hE70T5VH+k9|4jHQJ6Ain27w2ceEn()DT6eSac6m+#Y3Hlq#R>KAv#nnI zl3gh>!$B{)t*e&-(7SO+ly>39uz5C5i=im)zZ@#_t)Vyh8*t!^i$dPM_H++_7Ry3Y z9ONGsknX%J(A95EFG`n>PmqX@flShco;&itcS^2~Mi^H43op z)F@{@*EUHGr%Z%%#}t|xgpWf57n<45u}x-4wV5`hJ~>suRN~UUw`+quynd-ruzT-)5J;Gtx9)-v~%aVIar>f@QIT1Wp z30Gc!d{`#Fog9m0QQ|0y*9O(9XVK9R_22lsuFP@waZBIrz;u40JHA#8rzPASDhIn ze~#=vuQohc4AZ2%Emn*Fg0e_m z-;`&Gu08bDu6h+ixM3UugE?Deu1IbC^5KyaPt1yodVDu@i-x$-Fsr*y6ml5)EQ^h2 z7?_^M=q_D=cn2WfDucmAT;EV9Gd+_Ssj^}c%Ax>1J|zgMIv=aMGzg7-BTWR6=wNR>Wd; z+zn62j=@*#(rv*^k$Wcu*Y~zWn=LA{MUZW^!h})LUKGRDvH3r3LWt6fbM;et;0D`> z+ttyFlw*Me?7M0>zGxH?Ch0mJI0qXHip62I!XG0dOw)0t*wG1I@ZV(wtlUjwQNd5= ztMN++KmT-eub37`8_xQ4PNsvL3#PjuM_7upJPq=-*5V{iP8mItH`CTz*_;T;78p&9 z>z&gkTNZRak|m=3{a#9Sq+Q3yB0h@T4 x+GJCe*(3YlZXDwMR_1a`ULHQ)O=Gu~P&XgzlhS*x=fI&2#70pgYd=dn{TJvYg?#`3 literal 0 HcmV?d00001 diff --git a/src/components/public-notification/public-notification.tsx b/src/components/public-notification/public-notification.tsx index c67427fcc..0dfa34488 100644 --- a/src/components/public-notification/public-notification.tsx +++ b/src/components/public-notification/public-notification.tsx @@ -22,6 +22,7 @@ import state from "../../utils/publicNotificationStore"; import NewPublicNotification_T9n from "../../assets/t9n/public-notification/resources.json"; import { getLocaleComponentStrings } from "../../utils/locale"; import { consolidateLabels, removeDuplicateLabels } from "../../utils/downloadUtils"; +import { getAssetPath } from "@stencil/core"; @Component({ tag: "public-notification", @@ -223,6 +224,11 @@ export class PublicNotification { */ protected _jsonUtils: __esri.symbolsSupportJsonUtils; + /** + * string: The url to the onboarding image + */ + protected _onboardingImageUrl = ""; + /** * HTMLCalciteCheckboxElement: When enabled popups will be shown on map click */ @@ -398,6 +404,7 @@ export class PublicNotification { await this._getTranslations(); await this._initModules(); this._initSymbols(); + this._onboardingImageUrl = getAssetPath(`../assets/data/images/generic.png`); } /** @@ -633,11 +640,9 @@ export class PublicNotification { * @protected */ protected _getOnboardingImage(): VNode { - const href = window.location.href; - const url = href.substring(0, href.lastIndexOf('/')); return (
- +
); }