diff --git a/src/common/translations/en.js b/src/common/translations/en.js index 3c20371..1439586 100644 --- a/src/common/translations/en.js +++ b/src/common/translations/en.js @@ -30,6 +30,9 @@ const en = { 'diagnostic.package': 'Diagnostic Package', docs: 'Documentation', 'docs.link': 'Link to documentation', + 'deprecation.text': 'The Azure Maps Creator indoor map service is now deprecated and will be retired on 9/30/25. For more information, see', + 'deprecation.link.text': 'End of Life Announcement of Azure Maps Creator', + 'deprecation.link': 'https://aka.ms/AzureMapsCreatorDeprecation', download: 'Download', 'download.diagnostics': 'Download Diagnostics', 'dwg.layers': 'DWG Layers', diff --git a/src/components/top-bar/__snapshots__/top-bar.test.js.snap b/src/components/top-bar/__snapshots__/top-bar.test.js.snap index 6525d7f..357665c 100644 --- a/src/components/top-bar/__snapshots__/top-bar.test.js.snap +++ b/src/components/top-bar/__snapshots__/top-bar.test.js.snap @@ -70,49 +70,114 @@ Object { text-decoration: underline; } +.emotion-8 { + background: #efd9fd; + color: red; + height: 2rem; + border-radius: 0.625rem; + margin: 0.625rem; + padding: 0.125rem; + padding-left: 2rem; + padding-right: 2rem; + text-align: center; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-9 { + font-size: 1rem; +} + +.emotion-10 { + color: red; +} +
-
+
- - Microsoft Azure - - - + Microsoft Azure + + + + Azure Maps Creator + +
+
- Azure Maps Creator - + + docs + + + feedback + +
- - docs - - - feedback - + +   + + deprecation.text +   + + deprecation.link.text + + +
@@ -184,48 +249,113 @@ Object { text-decoration: underline; } +.emotion-8 { + background: #efd9fd; + color: red; + height: 2rem; + border-radius: 0.625rem; + margin: 0.625rem; + padding: 0.125rem; + padding-left: 2rem; + padding-right: 2rem; + text-align: center; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-9 { + font-size: 1rem; +} + +.emotion-10 { + color: red; +} +
-
+
- - Microsoft Azure - - - + Microsoft Azure + + + + Azure Maps Creator + +
+
- Azure Maps Creator - + + docs + + + feedback + +
- - docs - - - feedback - + +   + + deprecation.text +   + + deprecation.link.text + + +
, diff --git a/src/components/top-bar/top-bar.js b/src/components/top-bar/top-bar.js index 4172d02..800279e 100644 --- a/src/components/top-bar/top-bar.js +++ b/src/components/top-bar/top-bar.js @@ -3,6 +3,9 @@ import { useTranslation } from 'react-i18next'; import { azMapsCreatorTextStyle, barStyle, + deprecationBarStyle, + deprecationTextStyle, + deprecationLinkStyle, docLink, linksContainer, logoContainer, @@ -10,6 +13,8 @@ import { splitterStyle, } from './top-bar.style'; +import { Icon } from '@fluentui/react/lib/Icon'; + const docsLink = 'https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2'; const feedbackLink = 'https://feedback.azure.com/d365community/post/fc834083-0925-ec11-b6e6-000d3a4f09d0?page=1&sort=newest'; @@ -19,6 +24,7 @@ const TopBar = () => { const { isPlacesPreview } = useFeatureFlags(); return ( +
Microsoft Azure @@ -36,6 +42,20 @@ const TopBar = () => {
+
+
+   + + {t('deprecation.text')}  + + {t('deprecation.link.text')} + + + +
+
+ +
); }; diff --git a/src/components/top-bar/top-bar.style.js b/src/components/top-bar/top-bar.style.js index b52fb69..e15e1b1 100644 --- a/src/components/top-bar/top-bar.style.js +++ b/src/components/top-bar/top-bar.style.js @@ -12,6 +12,29 @@ export const barStyle = css` box-shadow: 0px 0px 0.625rem ${color.shadow}; `; +export const deprecationBarStyle = css` + background: #efd9fd; + color: red; + height: 2rem; + border-radius: 0.625rem; + margin: 0.625rem; + padding: 0.125rem; + padding-left: 2rem; + padding-right: 2rem; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; +`; + +export const deprecationTextStyle = css` + font-size: ${fontSize.xl}; +`; + +export const deprecationLinkStyle = css` + color: red; +`; + export const msftAzureTextStyle = css` font-weight: ${fontWeight.semibold}; font-size: ${fontSize.lg}; diff --git a/src/pages/conversion/__snapshots__/index.test.js.snap b/src/pages/conversion/__snapshots__/index.test.js.snap index 326dd1b..f7e4055 100644 --- a/src/pages/conversion/__snapshots__/index.test.js.snap +++ b/src/pages/conversion/__snapshots__/index.test.js.snap @@ -4,7 +4,6 @@ exports[`Conversion should render component 1`] = ` Object { "asFragment": [Function], "baseElement": .emotion-0 { - position: fixed; top: 5.5rem; height: calc(100% - 5.5rem - 2px); width: calc(100% - 2.5rem); @@ -307,7 +306,6 @@ Object { , "container": .emotion-0 { - position: fixed; top: 5.5rem; height: calc(100% - 5.5rem - 2px); width: calc(100% - 2.5rem); diff --git a/src/pages/conversion/style.js b/src/pages/conversion/style.js index d7a599a..e2c255a 100644 --- a/src/pages/conversion/style.js +++ b/src/pages/conversion/style.js @@ -3,7 +3,7 @@ import { css, keyframes } from '@emotion/css'; import { color, fontSize, fontWeight } from 'common/styles'; export const container = css` - position: fixed; + // position: fixed; top: 5.5rem; height: calc(100% - 5.5rem - 2px); width: calc(100% - 2.5rem); diff --git a/src/pages/processing/__snapshots__/processing.test.js.snap b/src/pages/processing/__snapshots__/processing.test.js.snap index d566011..8d4a324 100644 --- a/src/pages/processing/__snapshots__/processing.test.js.snap +++ b/src/pages/processing/__snapshots__/processing.test.js.snap @@ -4,7 +4,6 @@ exports[`ProcessingPage should match snapshot 1`] = ` Object { "asFragment": [Function], "baseElement": .emotion-0 { - position: fixed; width: 100%; -webkit-align-self: center; -ms-flex-item-align: center; @@ -54,7 +53,6 @@ Object { , "container": .emotion-0 { - position: fixed; width: 100%; -webkit-align-self: center; -ms-flex-item-align: center; diff --git a/src/pages/processing/processing.style.js b/src/pages/processing/processing.style.js index 66b47c9..02e25d3 100644 --- a/src/pages/processing/processing.style.js +++ b/src/pages/processing/processing.style.js @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; export const containerStyle = css` - position: fixed; + // position: fixed; width: 100%; align-self: center; height: 100%;