Restyle app grid with MUI and document app icons (#383)
This commit is contained in:
lenhanphung
@@ -90,24 +90,38 @@ And then visit [https://localhost:5000](https://localhost:5000).
|
||||
|
||||
An applist is configurable in the public folder to setup the grid of app accessible within Twake Calendar.
|
||||
|
||||
Each app has three fields:
|
||||
1. Copy `public/appList.example.js` to `public/appList.js`
|
||||
2. Place your app icons in `public/assets/images/svg/` directory
|
||||
3. Configure each app with three fields:
|
||||
|
||||
- name: the app’s name
|
||||
- icon: the link to the app’s icon
|
||||
- link: the app’s link or URL
|
||||
- name: the app's name
|
||||
- icon: the path to the app's icon (relative to public folder, e.g., `/assets/images/svg/app-chat.svg`)
|
||||
- link: the app's link or URL
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
var appList = [
|
||||
{
|
||||
name: "My App",
|
||||
icon: "https://myapp.com/myapp.png",
|
||||
link: "https://myapp.com",
|
||||
name: "Chat",
|
||||
link: "/twake",
|
||||
icon: "/assets/images/svg/app-chat.svg",
|
||||
},
|
||||
{
|
||||
name: "Drive",
|
||||
link: "/drive",
|
||||
icon: "/assets/images/svg/app-drive.svg",
|
||||
},
|
||||
{
|
||||
name: "Mail",
|
||||
link: "/mail",
|
||||
icon: "/assets/images/svg/app-mail.svg",
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
**Note**: `appList.js` is gitignored, so each environment can have its own configuration. The icon files in `public/assets/images/svg/` should be committed to the repository.
|
||||
|
||||
## Roadmap
|
||||
|
||||
The Minimum Viable Product involves all features currently used in production for **esn-frontend-calendar**.
|
||||
|
||||
@@ -1,7 +1,17 @@
|
||||
var appList = [
|
||||
{
|
||||
name: "Twake",
|
||||
name: "Chat",
|
||||
link: "/twake",
|
||||
icon: "https://twake-chat.com/tild3037-6365-4134-b838-383030366263__twake-chat-logo.svg",
|
||||
icon: "/assets/images/svg/app-chat.svg",
|
||||
},
|
||||
{
|
||||
name: "Drive",
|
||||
link: "/drive",
|
||||
icon: "/assets/images/svg/app-drive.svg",
|
||||
},
|
||||
{
|
||||
name: "Mail",
|
||||
link: "/mail",
|
||||
icon: "/assets/images/svg/app-mail.svg",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4973_28250)">
|
||||
<rect width="42.0224" height="42.0224" rx="13.878" fill="white"/>
|
||||
<rect width="42.0224" height="42.0224" rx="13.878" fill="url(#paint0_linear_4973_28250)"/>
|
||||
<g filter="url(#filter0_d_4973_28250)">
|
||||
<path d="M21 8.78577C28.6925 8.78577 34.9286 14.1714 34.9286 20.815C34.9286 27.4585 28.6925 32.8442 21 32.8442C19.4228 32.8442 17.9069 32.6178 16.4934 32.2006C14.9139 33.429 12.464 34.4604 9.14474 35.293C8.98758 35.3324 8.82131 35.3104 8.67983 35.2315C8.37294 35.0602 8.26298 34.6726 8.43424 34.3657L8.67178 33.9346C9.77412 31.9063 10.4619 30.2428 10.7351 28.9442C8.45945 26.8037 7.07141 23.9493 7.07141 20.815C7.07141 14.1714 13.3074 8.78577 21 8.78577Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4973_28250" x="4.92855" y="7.07148" width="32.1429" height="30.8121" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.428571"/>
|
||||
<feGaussianBlur stdDeviation="1.07143"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4973_28250"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4973_28250" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_4973_28250" x1="5.67857" y1="38.5714" x2="39.4286" y2="-7.73e-07" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8135FE"/>
|
||||
<stop offset="1" stop-color="#E8A6FF"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_4973_28250">
|
||||
<rect width="42" height="42" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="42" height="42" rx="13.8706" fill="white"/>
|
||||
<rect width="42" height="42" rx="13.8706" fill="url(#paint0_linear_4973_28258)"/>
|
||||
<g filter="url(#filter0_d_4973_28258)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9895 23.8807C20.9895 23.7668 20.9867 23.653 20.9812 23.5392C20.9755 23.4254 20.9672 23.3118 20.956 23.1985C20.9448 23.0851 20.9309 22.972 20.9142 22.8594C20.8975 22.7467 20.878 22.6345 20.8558 22.5228C20.8336 22.411 20.8086 22.3 20.781 22.1894C20.7533 22.0789 20.7229 21.9692 20.6898 21.8602C20.6567 21.7511 20.621 21.643 20.5826 21.5357C20.5443 21.4285 20.5033 21.3222 20.4597 21.217C20.4161 21.1117 20.37 21.0076 20.3213 20.9046C20.2725 20.8016 20.2213 20.7 20.1676 20.5995C20.1139 20.499 20.0578 20.3999 19.9992 20.3022C19.9406 20.2045 19.8797 20.1083 19.8165 20.0135C19.7531 19.9188 19.6875 19.8257 19.6197 19.7342C19.5518 19.6427 19.4818 19.5529 19.4095 19.4649C19.3372 19.3767 19.2629 19.2905 19.1863 19.2062C19.1098 19.1218 19.0313 19.0393 18.9508 18.9587C18.8702 18.8782 18.7878 18.7996 18.7033 18.7231C18.6189 18.6467 18.5327 18.5722 18.4446 18.4999C18.3566 18.4277 18.2668 18.3576 18.1753 18.2897C18.0838 18.2219 17.9907 18.1563 17.8959 18.0931C17.8012 18.0297 17.705 17.9688 17.6073 17.9102C17.5095 17.8517 17.4105 17.7956 17.31 17.7419C17.2096 17.6881 17.1078 17.6369 17.0048 17.5883C16.9019 17.5396 16.7977 17.4934 16.6925 17.4498C16.5873 17.4062 16.481 17.3652 16.3737 17.3268C16.2664 17.2884 16.1584 17.2527 16.0494 17.2197C15.9403 17.1866 15.8306 17.1562 15.72 17.1286C15.6096 17.1008 15.4984 17.0759 15.3867 17.0536C15.275 17.0314 15.1628 17.012 15.05 16.9952C14.9374 16.9786 14.8244 16.9646 14.711 16.9534C14.5976 16.9423 14.484 16.9339 14.3703 16.9283C14.2565 16.9227 14.1426 16.9199 14.0287 16.9199C13.9148 16.9199 13.8009 16.9227 13.6872 16.9283C13.5734 16.9339 13.4598 16.9423 13.3464 16.9534C13.2331 16.9646 13.12 16.9786 13.0073 16.9952C12.8947 17.012 12.7824 17.0314 12.6707 17.0536C12.559 17.0759 12.4479 17.1008 12.3374 17.1286C12.2269 17.1562 12.1171 17.1866 12.0081 17.2197C11.8991 17.2527 11.7909 17.2884 11.6837 17.3268C11.5764 17.3652 11.4701 17.4062 11.3649 17.4498C11.2597 17.4934 11.1555 17.5396 11.0526 17.5883C10.9496 17.6369 10.8479 17.6881 10.7474 17.7419C10.6469 17.7956 10.5478 17.8517 10.4501 17.9102C10.3524 17.9688 10.2562 18.0297 10.1615 18.0931C10.0668 18.1563 9.97364 18.2219 9.88213 18.2897C9.79063 18.3576 9.70086 18.4277 9.61279 18.4999C9.52474 18.5722 9.4385 18.6467 9.35408 18.7231C9.26969 18.7996 9.18721 18.8782 9.10666 18.9587C9.0261 19.0393 8.94757 19.1218 8.87107 19.2062C8.79456 19.2905 8.72019 19.3767 8.64791 19.4649C8.57564 19.5529 8.50557 19.6427 8.43771 19.7342C8.36984 19.8257 8.30427 19.9188 8.24099 20.0135C8.17769 20.1083 8.11676 20.2045 8.0582 20.3022C7.99963 20.3999 7.9435 20.499 7.88979 20.5995C7.8361 20.7 7.78489 20.8016 7.73619 20.9046C7.68748 21.0076 7.64133 21.1117 7.59773 21.217C7.55413 21.3222 7.51315 21.4285 7.47477 21.5357C7.4364 21.643 7.40067 21.7511 7.3676 21.8602C7.33453 21.9692 7.30416 22.0789 7.27647 22.1894C7.24879 22.3 7.22384 22.411 7.20162 22.5228C7.17939 22.6345 7.15993 22.7467 7.14322 22.8594C7.12649 22.972 7.11256 23.0851 7.10139 23.1985C7.09022 23.3118 7.08184 23.4254 7.07626 23.5392C7.07067 23.653 7.06787 23.7668 7.06787 23.8807C7.06787 23.9946 7.07067 24.1085 7.07626 24.2223C7.08184 24.3361 7.09022 24.4496 7.10139 24.5631C7.11256 24.6764 7.12649 24.7894 7.14322 24.9022C7.15993 25.0148 7.17939 25.127 7.20162 25.2388C7.22384 25.3505 7.24879 25.4616 7.27647 25.5721C7.30416 25.6826 7.33453 25.7924 7.3676 25.9014C7.40067 26.0104 7.4364 26.1186 7.47477 26.2258C7.51315 26.333 7.55413 26.4393 7.59773 26.5446C7.64133 26.6498 7.68748 26.7539 7.73619 26.8569C7.78489 26.9599 7.8361 27.0616 7.88979 27.1621C7.9435 27.2625 7.99963 27.3617 8.0582 27.4593C8.11676 27.557 8.17769 27.6533 8.24099 27.748C8.30427 27.8427 8.36984 27.9358 8.43771 28.0273C8.50557 28.1188 8.57564 28.2086 8.64791 28.2967C8.72019 28.3847 8.79456 28.471 8.87107 28.5554C8.94757 28.6398 9.0261 28.7223 9.10666 28.8028C9.18721 28.8834 9.26969 28.9619 9.35408 29.0384C9.4385 29.1149 9.52474 29.1893 9.61279 29.2615C9.70086 29.3338 9.79063 29.4039 9.88213 29.4717C9.97364 29.5396 10.0668 29.6051 10.1615 29.6685C10.2562 29.7318 10.3524 29.7927 10.4501 29.8512C10.5478 29.9098 10.6469 29.966 10.7474 30.0197C10.8479 30.0734 10.9496 30.1246 11.0526 30.1733C11.1555 30.222 11.2597 30.2681 11.3649 30.3118C11.4701 30.3553 11.5764 30.3963 11.6837 30.4347C11.7909 30.473 11.8991 30.5087 12.0081 30.5419C12.1171 30.5749 12.2269 30.6053 12.3374 30.633C12.4479 30.6606 12.559 30.6856 12.6707 30.7078C12.7824 30.73 12.8947 30.7496 13.0073 30.7662C13.12 30.783 13.2331 30.7969 13.3464 30.808C13.4598 30.8192 13.5734 30.8277 13.6872 30.8332C13.8009 30.8388 13.9148 30.8416 14.0287 30.8416H25.1661V23.8807H20.9895Z" fill="white"/>
|
||||
<path d="M25.1648 30.8414C30.547 30.8414 34.9101 26.4784 34.9101 21.0962C34.9101 15.7141 30.547 11.3511 25.1648 11.3511C19.7828 11.3511 15.4197 15.7141 15.4197 21.0962C15.4197 26.4784 19.7828 30.8414 25.1648 30.8414Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4973_28258" x="4.92616" y="9.6377" width="32.1257" height="23.774" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.428343"/>
|
||||
<feGaussianBlur stdDeviation="1.07086"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4973_28258"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4973_28258" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_4973_28258" x1="4.60468" y1="38.0154" x2="50.4373" y2="-7.92434" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.248154" stop-color="#FF4759"/>
|
||||
<stop offset="1" stop-color="#FFD600"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
@@ -0,0 +1,23 @@
|
||||
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="42" height="42" rx="13.8706" fill="white"/>
|
||||
<rect width="42" height="42" rx="13.8706" fill="url(#paint0_linear_4973_28253)"/>
|
||||
<g filter="url(#filter0_d_4973_28253)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.6422 15.4528C7.64989 16.2095 7.06756 17.386 7.06756 18.6339V30.0526C7.06756 32.704 9.21693 34.8534 11.8683 34.8534H30.1091C32.7605 34.8534 34.9098 32.704 34.9098 30.0526V18.6339C34.9098 17.386 34.3275 16.2095 33.3352 15.4528L23.4147 7.88724C21.9819 6.79458 19.9955 6.79458 18.5627 7.88724L8.6422 15.4528ZM10.1611 18.1703V30.2198C10.1611 31.1036 10.8776 31.8201 11.7614 31.8201H30.216C31.0998 31.8201 31.8162 31.1036 31.8162 30.2198V18.1703L22.8247 24.4676C21.7224 25.2396 20.255 25.2396 19.1527 24.4676L10.1611 18.1703Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4973_28253" x="4.92591" y="5.35438" width="32.1257" height="32.069" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.428343"/>
|
||||
<feGaussianBlur stdDeviation="1.07086"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4973_28253"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4973_28253" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_4973_28253" x1="5.88971" y1="37.5871" x2="41.0138" y2="2.03463" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1E91FF"/>
|
||||
<stop offset="0.997303" stop-color="#2ED9FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -71,15 +71,11 @@
|
||||
.app-grid
|
||||
display grid
|
||||
grid-template-columns repeat(3, 1fr)
|
||||
gap 16px
|
||||
padding 16px
|
||||
gap 0
|
||||
padding 0
|
||||
justify-items center
|
||||
align-items center
|
||||
|
||||
.app-grid img
|
||||
width 48px
|
||||
height 48px
|
||||
|
||||
.app-grid p
|
||||
margin-top 6px
|
||||
font-size 14px
|
||||
|
||||
@@ -282,6 +282,14 @@ export function Menubar({
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
minWidth: 230,
|
||||
mt: 2,
|
||||
p: "14px 8px",
|
||||
borderRadius: "14px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="app-grid">
|
||||
{applist.map((prop: AppIconProps) => (
|
||||
@@ -307,7 +315,7 @@ export function Menubar({
|
||||
minWidth: 280,
|
||||
mt: 1,
|
||||
padding: "0 !important",
|
||||
borderRadius: "16px",
|
||||
borderRadius: "14px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -374,16 +382,33 @@ export function MainTitle() {
|
||||
|
||||
function AppIcon({ prop }: { prop: AppIconProps }) {
|
||||
return (
|
||||
<a
|
||||
<Box
|
||||
component="a"
|
||||
href={prop.link}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
style={{ textDecoration: "none", color: "inherit" }}
|
||||
sx={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
p: "8px 12px 5px",
|
||||
borderRadius: "14px",
|
||||
"&:hover": {
|
||||
backgroundColor: "action.hover",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<img src={prop.icon} alt={prop.name} />
|
||||
<p>{prop.name}</p>
|
||||
</div>
|
||||
</a>
|
||||
<Box
|
||||
component="img"
|
||||
src={prop.icon}
|
||||
alt={prop.name}
|
||||
sx={{ maxWidth: 42, height: 42 }}
|
||||
/>
|
||||
<Typography sx={{ mt: 0.75, textAlign: "center", fontSize: 12 }}>
|
||||
{prop.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user