From c70806a9db07c1c0d77f4db16ebe2166df8758ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Sun, 30 Mar 2025 19:59:30 +0200 Subject: [PATCH] Add dropdown enhancements and new apps card with brand icons (#2249) --- core/scss/ui/_dropdowns.scss | 1 + core/scss/ui/_type.scss | 11 +++ preview/pages/_data/brands.json | 74 +++++++++++++++++++ .../pages/_includes/cards/navbar-apps.html | 23 ++++++ .../_includes/cards/navbar-notifications.html | 11 ++- .../pages/_includes/layout/navbar-side.html | 14 +++- 6 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 preview/pages/_data/brands.json create mode 100644 preview/pages/_includes/cards/navbar-apps.html diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss index 3b8450e1a..37e1eeb78 100644 --- a/core/scss/ui/_dropdowns.scss +++ b/core/scss/ui/_dropdowns.scss @@ -109,6 +109,7 @@ .dropdown-menu-card { padding: 0; + min-width: 20rem; > .card { margin: 0; diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index 2df700982..1e2e5d26c 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -184,6 +184,17 @@ a:hover:has(.icon) { text-decoration: none; } +.link-hoverable { + border-radius: var(--#{$prefix}border-radius); + transition: background-color .15s ease-in-out; + + &:hover { + text-decoration: none; + color: var(--#{$prefix}primary); + background: color-transparent(var(--#{$prefix}secondary), .04); + } +} + /** Subheader */ diff --git a/preview/pages/_data/brands.json b/preview/pages/_data/brands.json new file mode 100644 index 000000000..7affc4909 --- /dev/null +++ b/preview/pages/_data/brands.json @@ -0,0 +1,74 @@ +[ + {"image": "amazon.svg", "name": "Amazon" }, + {"image": "android.svg", "name": "Android" }, + {"image": "app-store.svg", "name": "Apple App Store" }, + {"image": "apple-podcast.svg", "name": "Apple Podcast" }, + {"image": "apple.svg", "name": "Apple" }, + {"image": "behance.svg", "name": "Behance" }, + {"image": "discord.svg", "name": "Discord" }, + {"image": "dribbble.svg", "name": "Dribbble" }, + {"image": "dropbox.svg", "name": "Dropbox" }, + {"image": "ever-green.svg", "name": "Ever Green" }, + {"image": "facebook.svg", "name": "Facebook" }, + {"image": "figma.svg", "name": "Figma" }, + {"image": "font-awesome.svg", "name": "Font Awesome" }, + {"image": "google-ads.svg", "name": "Google Ads" }, + {"image": "google-adsense.svg", "name": "Google AdSense" }, + {"image": "google-analytics.svg", "name": "Google Analytics" }, + {"image": "google-cloud.svg", "name": "Google Cloud" }, + {"image": "google-drive.svg", "name": "Google Drive" }, + {"image": "google-fit.svg", "name": "Google Fit" }, + {"image": "google-home.svg", "name": "Google Home" }, + {"image": "google-maps.svg", "name": "Google Maps" }, + {"image": "google-meet.svg", "name": "Google Meet" }, + {"image": "google-photos.svg", "name": "Google Photos" }, + {"image": "google-play.svg", "name": "Google Play" }, + {"image": "google-shopping.svg", "name": "Google Shopping" }, + {"image": "google-teams.svg", "name": "Google Teams" }, + {"image": "google.svg", "name": "Google" }, + {"image": "instagram.svg", "name": "Instagram" }, + {"image": "klarna.svg", "name": "Klarna" }, + {"image": "linkedin.svg", "name": "LinkedIn" }, + {"image": "mailchimp.svg", "name": "Mailchimp" }, + {"image": "medium.svg", "name": "Medium" }, + {"image": "messenger.svg", "name": "Messenger" }, + {"image": "meta.svg", "name": "Meta" }, + {"image": "monday.svg", "name": "Monday" }, + {"image": "netflix.svg", "name": "Netflix" }, + {"image": "notion.svg", "name": "Notion" }, + {"image": "office-365.svg", "name": "Office 365" }, + {"image": "opera.svg", "name": "Opera" }, + {"image": "paypal.svg", "name": "PayPal" }, + {"image": "petreon.svg", "name": "Patreon" }, + {"image": "pinterest.svg", "name": "Pinterest" }, + {"image": "play-store.svg", "name": "Play Store" }, + {"image": "quora.svg", "name": "Quora" }, + {"image": "reddit.svg", "name": "Reddit" }, + {"image": "shopify.svg", "name": "Shopify" }, + {"image": "skype.svg", "name": "Skype" }, + {"image": "slack.svg", "name": "Slack" }, + {"image": "snapchat.svg", "name": "Snapchat" }, + {"image": "soundcloud.svg", "name": "SoundCloud" }, + {"image": "spotify.svg", "name": "Spotify" }, + {"image": "stripe.svg", "name": "Stripe" }, + {"image": "telegram.svg", "name": "Telegram" }, + {"image": "tiktok.svg", "name": "TikTok" }, + {"image": "tinder.svg", "name": "Tinder" }, + {"image": "trello.svg", "name": "Trello" }, + {"image": "truth.svg", "name": "Truth" }, + {"image": "tumblr.svg", "name": "Tumblr" }, + {"image": "twitch.svg", "name": "Twitch" }, + {"image": "twitter.svg", "name": "Twitter" }, + {"image": "vimeo.svg", "name": "Vimeo" }, + {"image": "vk.svg", "name": "VK" }, + {"image": "watppad.svg", "name": "Wattpad" }, + {"image": "webflow.svg", "name": "Webflow" }, + {"image": "whatsapp.svg", "name": "WhatsApp" }, + {"image": "wordpress.svg", "name": "WordPress" }, + {"image": "xing.svg", "name": "Xing" }, + {"image": "yelp.svg", "name": "Yelp" }, + {"image": "youtube.svg", "name": "YouTube" }, + {"image": "zapier.svg", "name": "Zapier" }, + {"image": "zendesk.svg", "name": "Zendesk" }, + {"image": "zoom.svg", "name": "Zoom" } +] \ No newline at end of file diff --git a/preview/pages/_includes/cards/navbar-apps.html b/preview/pages/_includes/cards/navbar-apps.html new file mode 100644 index 000000000..1a11351fb --- /dev/null +++ b/preview/pages/_includes/cards/navbar-apps.html @@ -0,0 +1,23 @@ +
+
+
My Apps
+ +
+ + {% include "ui/icon.html" icon="settings" %} + +
+
+
+
+ {% for brand in brands %} +
+ + + {{ brand.name }} + +
+ {% endfor %} +
+
+
\ No newline at end of file diff --git a/preview/pages/_includes/cards/navbar-notifications.html b/preview/pages/_includes/cards/navbar-notifications.html index 24e39d6d8..15143d929 100644 --- a/preview/pages/_includes/cards/navbar-notifications.html +++ b/preview/pages/_includes/cards/navbar-notifications.html @@ -1,6 +1,7 @@
-
-

Last updates

+
+

Notifications

+
@@ -68,4 +69,10 @@
+
+
+
{% include "ui/button.html" block text="Archive all" %}
+
{% include "ui/button.html" block text="Mark all as read" %}
+
+
diff --git a/preview/pages/_includes/layout/navbar-side.html b/preview/pages/_includes/layout/navbar-side.html index 4a420a7dc..d73861420 100644 --- a/preview/pages/_includes/layout/navbar-side.html +++ b/preview/pages/_includes/layout/navbar-side.html @@ -25,9 +25,8 @@ {% include "ui/icon.html" icon="sun" %} - -
- +
+ @@ -35,6 +34,15 @@ {% include "cards/navbar-notifications.html" %}
+ +
+ +
+ {% include "cards/navbar-apps.html" %} +
+