eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-2565: Apply new design for smart banner

Browse Source
This commit is contained in:
HuyNguyen
2024-02-06 15:52:02 +07:00
committed by Dat PHAM HOANG
parent e7eca92ada
commit 34d7845358
12 changed files with 97 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/i18n/translater.js
+16
View File
@@ -1,7 +1,23 @@
const i18n = {}; const i18n = {};
const languageDefault = 'en';
/**
*
* @param {String} language
* @returns {boolean}
*/
function isValidUserLanguage(language) {
if (language == null || language == undefined) {
return false;
}
return true;
}
function getUserLanguage() { function getUserLanguage() {
console.info(`[Twake Mail] Current Language: `, navigator.language); console.info(`[Twake Mail] Current Language: `, navigator.language);
if (isValidUserLanguage(navigator.language)) {
return languageDefault;
}
return navigator.language.split('-')[0]; return navigator.language.split('-')[0];
} }
web/index.html
+24 -32
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<!-- <!--
If you are serving your web app in a path other than the root, change the If you are serving your web app in a path other than the root, change the
@@ -38,6 +38,7 @@
<script type="application/javascript" src="assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script> <script type="application/javascript" src="assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
<script src="splash/splash.js"></script> <script src="splash/splash.js"></script>
<script src="worker_service/worker_service.js"></script> <script src="worker_service/worker_service.js"></script>
<script src="i18n/translater.js"></script>
</head> </head>
<body> <body>
@@ -58,42 +59,33 @@
</div> </div>
</div> </div>
<div class="bottom-sheet"> <div class="smart-banner">
<div class="sheet-header"> <button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
<span class="open_on_mobile_title">Open Twake Mail in...</span> <picture class="close-icon">
</div> <source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: light)">
<div class="sheet-content"> <source srcset="worker_service/img/ic-close-1x.png 1x, worker_service/img/ic-close-2x.png 2x, worker_service/img/ic-close-3x.png 3x, worker_service/img/ic-close-4x.png 4x" media="(prefers-color-scheme: dark)">
<span class="open_on_mobile_actions" onclick={hanldeOpenTwakeMailApp()}> <img aria-hidden="true" src="worker_service/img/ic-close-1x.png" alt="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#002DDF" </picture>
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> </button>
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" /> <div class="banner-content">
<circle cx="12" cy="16" r="1" fill="black" /> <picture class="twake-mail-icon">
<line x1="12" y1="18" x2="12.01" y2="18" /> <source srcset="worker_service/img/tmail-1x.png 1x, worker_service/img/tmail-2x.png 2x, worker_service/img/tmail-3x.png 3x, worker_service/img/tmail-4x.png 4x" media="(prefers-color-scheme: light)">
</svg> <source srcset="worker_service/img/tmail-1x.png 1x, worker_service/img/tmail-2x.png 2x, worker_service/img/tmail-3x.png 3x, worker_service/img/tmail-4x.png 4x" media="(prefers-color-scheme: dark)">
<span style="color: #002DDF">Twake Mail App</span> <img aria-hidden="true" src="worker_service/img/tmail-1x.png" alt="">
<span style="flex: 1"></span> </picture>
<button class="button openApp"> <span>
Open <div class="banner-title" id="banner-title-id"></div>
</button> <div class="banner-description" id="banner-description-id"></div>
</span> </span>
<span class="open_on_mobile_actions" onclick={handleContinueTwakeMailOnWeb()}> <span style="flex: 1"></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" <span class="open-button" id="open-button-id" onClick= {handleOpenTwakeMailApp()}></span>
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> </div>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
<span>Continue on web</span>
<span style="flex: 1"></span>
<Button class="button continueWeb">
Continue
</Button>
</span>
</div>
</div> </div>
<!-- This script installs service_worker.js to provide PWA functionality to <!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see: application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers --> https://developers.google.com/web/fundamentals/primers/service-workers -->
<script> <script>
loadLanguageResources()
initialWorkerService(); initialWorkerService();
</script> </script>
<script src="https://unpkg.com/pica/dist/pica.min.js" ></script> <script src="https://unpkg.com/pica/dist/pica.min.js" ></script>
web/worker_service/img/ic-close-1x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 B

web/worker_service/img/ic-close-2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 519 B

web/worker_service/img/ic-close-3x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 669 B

web/worker_service/img/ic-close-4x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 839 B

web/worker_service/img/tmail-1x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

web/worker_service/img/tmail-2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

web/worker_service/img/tmail-3x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

web/worker_service/img/tmail-4x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

web/worker_service/style.css
+45 -52
View File
@@ -1,53 +1,24 @@
.bottom-sheet { .smart-banner {
display: none; display: none;
position: fixed; position: fixed;
bottom: 0; left: 14px;
left: 0; right: 14px;
width: 100%; border-radius: 10px;
background-color: #fff; background: linear-gradient(0deg, #FFFBFE 0%, #FFFBFE 100%), linear-gradient(0deg, rgba(122.19, 184.06, 255, 0.09) 0%, rgba(122.19, 184.06, 255, 0.09) 100%);
border-top-left-radius: 20px; box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.16);
border-top-right-radius: 20px;
box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
color: #fff;
}
.sheet-content {
padding: 20px;
} }
.open_on_mobile_title { .banner-content {
height: 48px; padding-bottom: 18px;
line-height: 48px;
display: inline-block;
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #eee;
text-align: center;
width: 100%;
margin-bottom: 16px;
color: #000;
}
.open_on_mobile_actions {
width: 100%;
display: block; display: block;
height: 48px;
display: flex; display: flex;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
}
& > span { .twake-mail-icon {
margin-left: 8px; margin-left: 12px;
font-weight: bold; margin-right: 16px;
}
} }
.button { .button {
@@ -55,21 +26,43 @@
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px;
margin: 4px 2px; margin: 4px 2px;
cursor: pointer; cursor: pointer;
border-radius: 5px; background-color: transparent;
font-weight: bold;
} }
.openApp { .close-icon {
color: white; position: absolute;
background-color: #002DDF; top: 8px;
padding: 10px 20px; right: 8px;
} }
.continueWeb { .open-button {
color: #002DDF; color: #007AFF;
background-color: white; font-size: 17px;
padding: 10px 8px; font-family: Inter;
font-weight: 500;
line-height: 24px;
word-wrap: break-word;
margin-right: 24px;
margin-left: 16px;
}
.banner-title {
font-family: Inter;
word-wrap: break-word;
color: black;
font-size: 16px;
font-weight: 500;
line-height: 20px;
margin-bottom: 10px;
}
.banner-description {
font-size: 13px;
font-weight: 400;
line-height: 16px;
font-family: Inter;
word-wrap: break-word;
color: black;
} }
web/worker_service/worker_service.js
+12 -12
View File
@@ -77,7 +77,7 @@ function fetchServiceWorker() {
function handleContinueTwakeMailOnWeb() { function handleContinueTwakeMailOnWeb() {
console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.'); console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.');
closeBottomSheet(); closeSmartBanner();
fetchServiceWorker(); fetchServiceWorker();
} }
@@ -118,22 +118,22 @@ function initialWorkerService() {
console.info('[TwakeMail] initialWorkerService(): Login callback'); console.info('[TwakeMail] initialWorkerService(): Login callback');
handleContinueTwakeMailOnWeb(); handleContinueTwakeMailOnWeb();
} else { } else {
openBottomSheet(); openSmartBanner();
} }
} }
function openBottomSheet() { function openSmartBanner() {
console.info('[TwakeMail] openBottomSheet(): Open the bottom sheet.'); console.info('[TwakeMail] openSmartBanner(): Open the smart banner.');
const bottomSheet = document.querySelector(".bottom-sheet"); const smartBanner = document.querySelector(".smart-banner");
bottomSheet.style.display = "block"; smartBanner.style.display = "block";
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
bottomSheet.style.bottom = "0"; smartBanner.style.top = "16px";
} }
function closeBottomSheet() { function closeSmartBanner() {
console.info('[TwakeMail] closeBottomSheet(): Closing the bottom sheet.'); console.info('[TwakeMail] closeSmartBanner(): Closing the smart banner.');
const bottomSheet = document.querySelector(".bottom-sheet"); const smartBanner = document.querySelector(".smart-banner");
bottomSheet.style.display = "none"; smartBanner.style.display = "none";
document.body.style.overflow = "auto"; document.body.style.overflow = "auto";
bottomSheet.style.bottom = "-100%"; smartBanner.style.top = 0;
} }