eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 2 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 languageDefault = 'en';
/**
*
* @param {String} language
* @returns {boolean}
*/
function isValidUserLanguage(language) {
if (language == null || language == undefined) {
return false;
}
return true;
}
function getUserLanguage() {
console.info(`[Twake Mail] Current Language: `, navigator.language);
if (isValidUserLanguage(navigator.language)) {
return languageDefault;
}
return navigator.language.split('-')[0];
}
web/index.html
+24 -32
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<!--
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 src="splash/splash.js"></script>
<script src="worker_service/worker_service.js"></script>
<script src="i18n/translater.js"></script>
</head>
<body>
@@ -58,42 +59,33 @@
</div>
</div>
<div class="bottom-sheet">
<div class="sheet-header">
<span class="open_on_mobile_title">Open Twake Mail in...</span>
</div>
<div class="sheet-content">
<span class="open_on_mobile_actions" onclick={hanldeOpenTwakeMailApp()}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#002DDF"
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
<circle cx="12" cy="16" r="1" fill="black" />
<line x1="12" y1="18" x2="12.01" y2="18" />
</svg>
<span style="color: #002DDF">Twake Mail App</span>
<span style="flex: 1"></span>
<button class="button openApp">
Open
</button>
</span>
<span class="open_on_mobile_actions" onclick={handleContinueTwakeMailOnWeb()}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black"
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<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 class="smart-banner">
<button class="button close" onClick={handleContinueTwakeMailOnWeb()}>
<picture class="close-icon">
<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)">
<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)">
<img aria-hidden="true" src="worker_service/img/ic-close-1x.png" alt="">
</picture>
</button>
<div class="banner-content">
<picture class="twake-mail-icon">
<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)">
<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)">
<img aria-hidden="true" src="worker_service/img/tmail-1x.png" alt="">
</picture>
<span>
<div class="banner-title" id="banner-title-id"></div>
<div class="banner-description" id="banner-description-id"></div>
</span>
<span style="flex: 1"></span>
<span class="open-button" id="open-button-id" onClick= {handleOpenTwakeMailApp()}></span>
</div>
</div>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
loadLanguageResources()
initialWorkerService();
</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;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
border-top-left-radius: 20px;
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;
left: 14px;
right: 14px;
border-radius: 10px;
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%);
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.16);
}
.open_on_mobile_title {
height: 48px;
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%;
.banner-content {
padding-bottom: 18px;
display: block;
height: 48px;
display: flex;
justify-content: left;
align-items: center;
}
& > span {
margin-left: 8px;
font-weight: bold;
}
.twake-mail-icon {
margin-left: 12px;
margin-right: 16px;
}
.button {
@@ -55,21 +26,43 @@
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
background-color: transparent;
}
.openApp {
color: white;
background-color: #002DDF;
padding: 10px 20px;
.close-icon {
position: absolute;
top: 8px;
right: 8px;
}
.continueWeb {
color: #002DDF;
background-color: white;
padding: 10px 8px;
.open-button {
color: #007AFF;
font-size: 17px;
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() {
console.info('[TwakeMail] handleContinueTwakeMailOnWeb(): Continue on web.');
closeBottomSheet();
closeSmartBanner();
fetchServiceWorker();
}
@@ -118,22 +118,22 @@ function initialWorkerService() {
console.info('[TwakeMail] initialWorkerService(): Login callback');
handleContinueTwakeMailOnWeb();
} else {
openBottomSheet();
openSmartBanner();
}
}
function openBottomSheet() {
console.info('[TwakeMail] openBottomSheet(): Open the bottom sheet.');
const bottomSheet = document.querySelector(".bottom-sheet");
bottomSheet.style.display = "block";
function openSmartBanner() {
console.info('[TwakeMail] openSmartBanner(): Open the smart banner.');
const smartBanner = document.querySelector(".smart-banner");
smartBanner.style.display = "block";
document.body.style.overflow = "hidden";
bottomSheet.style.bottom = "0";
smartBanner.style.top = "16px";
}
function closeBottomSheet() {
console.info('[TwakeMail] closeBottomSheet(): Closing the bottom sheet.');
const bottomSheet = document.querySelector(".bottom-sheet");
bottomSheet.style.display = "none";
function closeSmartBanner() {
console.info('[TwakeMail] closeSmartBanner(): Closing the smart banner.');
const smartBanner = document.querySelector(".smart-banner");
smartBanner.style.display = "none";
document.body.style.overflow = "auto";
bottomSheet.style.bottom = "-100%";
smartBanner.style.top = 0;
}