Ticket #3399 - Alrts, Social Auth, Sliders, etc.

unacms · Oct 14, 2021 · 7bc037f · 7bc037f
1 parent a6f972f
commit 7bc037f
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 20 deletions.
diff --git a/modules/boonex/artificer/data/template/mod_profile/unit.html b/modules/boonex/artificer/data/template/mod_profile/unit.html
@@ -1,5 +1,5 @@
 <div class="__class__ bx-def-unit flex items-center mb-4 mr-2">
-    <div class="bx-def-unit-img bx-def-__size__ bx-def-__size__-size __class_size__">
+    <div class="bx-def-unit-img bx-def-__size__ bx-def-__size__-size __class_size__ flex-none">
         <a class="text-center" href="__content_url__" onclick="__content_click__">
             <bx_if:show_thumb_image>
                 <img class="bx-base-pofile-unit-thumb bx-def-__size__ bx-def-__size__-size __class_size__ rounded-full box-border" src="__thumb_url__" />

diff --git a/modules/boonex/artificer/data/template/system/css/informer.css b/modules/boonex/artificer/data/template/system/css/informer.css
@@ -0,0 +1,17 @@
+/*--
+import url(../../../../../../../template/css/informer.css);
+--*/
+
+.bx-informer-icon {
+    display: none;
+    vertical-align: top;
+}
+.bx-informer-msg-info .bx-informer-icon-info {
+    display: inline-block;
+}
+.bx-informer-msg-alert .bx-informer-icon-alert {
+    display: inline-block;
+}
+.bx-informer-msg-error .bx-informer-icon-error {
+    display: inline-block;
+}
diff --git a/modules/boonex/artificer/data/template/system/css/menu-sidebar.css b/modules/boonex/artificer/data/template/system/css/menu-sidebar.css
@@ -1,30 +1,39 @@
 .bx-sidebar {
     position: fixed;
+    visibility: hidden;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
-
+}
+.bx-sidebar.bx-sidebar-active {
+    visibility: visible;
+}
+.bx-sidebar {
+    -webkit-transition: opacity 0.3s 0s;
+    -moz-transition: opacity 0.3s 0s;
+    transition: opacity 0.3s 0s;
+}
+.bx-sidebar .bx-sidebar-cnt {
     -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     -ms-transform: translateZ(0);
     -o-transform: translateZ(0);
     transform: translateZ(0);
 
-
-    -webkit-transition: -webkit-transform 0.5s 0s, opacity 0.3s 0s;
-    -moz-transition: -moz-transform 0.5s 0s, opacity 0.3s 0s;
-    transition: transform 0.5s 0s, opacity 0.3s 0s;
+    -webkit-transition: -webkit-transform 0.5s 0s;
+    -moz-transition: -moz-transform 0.5s 0s;
+    transition: transform 0.5s 0s;
 }
-.bx-sidebar.bx-sidebar-site {
+.bx-sidebar.bx-sidebar-site .bx-sidebar-cnt {
     -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     -o-transform: translateX(-100%);
     transform: translateX(-100%);
 }
-.bx-sidebar.bx-sidebar-account {
+.bx-sidebar.bx-sidebar-account .bx-sidebar-cnt {
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     -ms-transform: translateX(100%);
@@ -34,16 +43,23 @@
 .bx-sidebar.bx-sidebar-site.bx-sidebar-active,
 .bx-sidebar.bx-sidebar-account.bx-sidebar-active {
     opacity: 1;
+
+    -webkit-transition: opacity 0.3s 0s;
+    -moz-transition: opacity 0.3s 0s;
+    transition: opacity 0.3s 0s;
+}
 
+.bx-sidebar.bx-sidebar-site.bx-sidebar-active .bx-sidebar-cnt,
+.bx-sidebar.bx-sidebar-account.bx-sidebar-active .bx-sidebar-cnt {   
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
     -o-transform: translateX(0);
     transform: translateX(0);
 
-    -webkit-transition: -webkit-transform 0.5s 0s, opacity 0.3s 0s;
-    -moz-transition: -moz-transform 0.5s 0s, opacity 0.3s 0s;
-    transition: transform 0.5s 0s, opacity 0.3s 0s;
+    -webkit-transition: -webkit-transform 0.5s 0s;
+    -moz-transition: -moz-transform 0.5s 0s;
+    transition: transform 0.5s 0s;
 }
 
 .bx-sidebar-item.bx-si-dropdown-has .bx-si-dropdown-icon {

diff --git a/modules/boonex/artificer/data/template/system/informer.html b/modules/boonex/artificer/data/template/system/informer.html
@@ -0,0 +1,20 @@
+<div class="bx-def-page-width mx-auto px-4 pt-4 box-border">
+    <div id="bx-informer">
+        <bx_repeat:messages>
+            <div id="__id__" class="bx-informer-msg __class__ flex items-center mt-4 first:mt-0 p-4 rounded-md">
+                <div class="flex-none">
+                    <svg class="bx-informer-icon bx-informer-icon-info text-blue-400 h-5 w-5" x-description="Heroicon name: solid/information-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+                    </svg>
+                    <svg class="bx-informer-icon bx-informer-icon-alert h-5 w-5 text-yellow-400" x-description="Heroicon name: solid/exclamation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+                    </svg>
+                    <svg class="bx-informer-icon bx-informer-icon-error h-5 w-5 text-red-400" x-description="Heroicon name: solid/x-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
+                    </svg>
+                </div>
+                <div class="ml-3 text-sm">__msg__</div>
+            </div>
+        </bx_repeat:messages>
+    </div>
+</div>
diff --git a/modules/boonex/artificer/data/template/system/profile_avatar.html b/modules/boonex/artificer/data/template/system/profile_avatar.html
@@ -1,9 +1,9 @@
 <div class="bx-profile-avatar group text-gray-600 hover:text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-800 rounded-md">
     <a href="javascript:void(0)" onclick="javascript:$('#bx-profile-switcher').dolPopup({});">
         <div class="bx-profile-avatar-cnt flex items-center px-4 py-2">
-            <div class="bx-pa-img">__profile_unit__</div>
+            <div class="bx-pa-img absolute">__profile_unit__</div>
             <div class="bx-pa-info w-full">
-                <div class="bx-pa-info-cnt pl-4 box-border">
+                <div class="bx-pa-info-cnt pl-14 box-border">
                     <div class="bx-pai-line text-gray-600 dark:text-gray-300 text-sm group-hover:text-gray-800 dark:group-hover:text-white font-semibold truncate">__profile_title__</div>
                     <div class="bx-pai-line text-green-600 dark:text-green-400 text-xs truncate uppercase tracking-wider font-normal">
                         <div><!--<bx_include_auto:menu_icon.html />--><span>__profile_acl_title__</span></div>

diff --git a/modules/boonex/artificer/data/template/system/profile_stats.html b/modules/boonex/artificer/data/template/system/profile_stats.html
@@ -2,9 +2,9 @@
     <div class="bx-profile-stats-cnt bx-def-padding">
         <div class="bx-ps-user">
             <div class="bx-profile-avatar-cnt flex items-center cursor-pointer" onclick="window.location.href='__profile_url__'">
-                <div class="bx-pa-img">__profile_unit__</div>
+                <div class="bx-pa-img absolute">__profile_unit__</div>
                 <div class="bx-pa-info w-full">
-                    <div class="bx-pa-info-cnt pl-4 box-border">
+                    <div class="bx-pa-info-cnt pl-14 box-border">
                         <div class="bx-pai-line text-gray-600 dark:text-gray-300 text-sm group-hover:text-gray-800 dark:group-hover:text-white font-semibold truncate">__profile_title__</div>
                         <div class="bx-pai-line text-green-600 dark:text-green-400 text-xs truncate uppercase tracking-wider font-normal">
                             <div><!--<bx_include_auto:menu_icon.html />--><span>__profile_acl_title__</span></div>

diff --git a/modules/boonex/artificer/data/template/system/sidebar_account.html b/modules/boonex/artificer/data/template/system/sidebar_account.html
@@ -1,7 +1,7 @@
 <div class="bx-sidebar bx-sidebar-account fixed inset-0 flex justify-end z-40" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
+    <div class="bx-sidebar-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
     <div class="flex-shrink-0 w-14" aria-hidden="true"></div>
-    <div class="relative flex-1 flex flex-col max-w-xs w-full py-4 bg-white dark:bg-gray-900">
+    <div class="bx-sidebar-cnt relative flex-1 flex flex-col max-w-xs w-full py-4 bg-white dark:bg-gray-900">
         <div class="absolute top-0 left-0 -ml-12 pt-2">
             <button type="button" class="bx-sidebar-account-close ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                 <span class="sr-only"><bx_text:_bx_artificer_txt_close_sidebar /></span>

diff --git a/modules/boonex/artificer/data/template/system/sidebar_site.html b/modules/boonex/artificer/data/template/system/sidebar_site.html
@@ -1,6 +1,6 @@
 <div class="bx-sidebar bx-sidebar-site fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
-    <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white dark:bg-gray-900">
+    <div class="bx-sidebar-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
+    <div class="bx-sidebar-cnt relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white dark:bg-gray-900">
         <div class="absolute top-0 right-0 -mr-12 pt-2">
             <button type="button" class="bx-sidebar-site-close ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                 <span class="sr-only"><bx_text:_bx_artificer_txt_close_sidebar /></span>

diff --git a/modules/boonex/artificer/js/tailwind.config.js b/modules/boonex/artificer/js/tailwind.config.js
@@ -13,6 +13,7 @@ module.exports = {
         'text-red-400', 
         'bx-form-required', 'bx-form-warn',
         'bx-popup-fog',
+        'bx-informer-msg-info', 'bx-informer-msg-alert', 'bx-informer-msg-error',
     ]
   },
   darkMode: 'media', // false or 'media' or 'class'

diff --git a/modules/boonex/artificer/template/css/tailwind.css b/modules/boonex/artificer/template/css/tailwind.css
@@ -153,6 +153,22 @@
     .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline li.bx-mi-primary {
         @apply border-transparent text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
     }
+
+
+    /* Common elements: Alerts */
+    .bx-informer-msg a {
+        @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
+    }
+    .bx-informer-msg-info {
+        @apply bg-blue-50 text-blue-700;
+    }
+    .bx-informer-msg-alert {
+        @apply bg-yellow-50 text-yellow-700;
+    }
+    .bx-informer-msg-error {
+        @apply bg-red-50 text-red-700;
+    }
+
 
     /* Modules: Timeline */
     .bx-menu-custom-hor.bx-menu-object-bx_timeline_menu_view li.bx-menu-tab-active a {

diff --git a/modules/boonex/artificer/template/css/tailwind.min.css b/modules/boonex/artificer/template/css/tailwind.min.css