feat: Profile Dropdown

.gitignore

@@ -4,4 +4,5 @@ env
 ACMAS/package-lock.json
 ACMAS/package.json
 ACMAS/app/db.sqlite3
-ACMAS/node_modules
+ACMAS/node_modules
+**/.DS_Store

ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html

@@ -0,0 +1,157 @@
+{% load component_tags %}
+
+<style>
+
+#dropdown_profile_x {
+    transform: rotate(-12deg);
+}
+#dropdown_profile_y {
+    transform: rotate(-45deg);
+}
+#dropdown_profile_z {
+    transform: rotate(-78deg);
+}
+#dropdown_profile_X > svg {
+    transform: rotate(282deg); /* 102 + 180, there's a bug with tooltip, X also has class rotate-180 */
+}
+#dropdown_profile_Y > svg {
+    transform: rotate(135deg);
+}
+#dropdown_profile_Z > svg {
+    transform: rotate(168deg);
+}
+
+#dropdown_profile {
+    clip-path: polygon(-50% 0, 70% 0, 70% 150%, -50% 150%);
+}
+#dropdown_profile_hover-zone {
+    width: 12rem;
+    height: 12rem;
+    clip-path: circle(100% at 100% 100%);
+}
+#dropdown_profile_diameter {
+    transition: all 0.5s ease-in-out;
+    width: 12rem;
+    height: 12rem;
+}
+
+.dropdown_profile_hover {
+    transform: rotate(-90deg);
+}
+.dropdown_profile_por_hover {
+    transform: rotate(90deg);
+}
+.dropdown_profile_translate {
+    transform: translate(6rem, -4.8rem);
+}
+</style>
+
+<div class="relative px-4 z-50">
+    <div id="dropdown_profile" class="absolute top-1/2 right-1/2 dropdown_profile_translate invisible">
+        <div id="dropdown_profile_por"
+                class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full transition-all duration-200 ease-in-out visible"
+                onmouseover="rotate()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="fill-gray-700">
+                <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
+            </svg>
+        </div>
+        <div id="dropdown_profile_diameter" class="relative rounded-full invisible">
+            <div id="dropdown_profile_hover-zone"
+                class="absolute left-0 top-0 -translate-x-12 -translate-y-12 rounded-lg invisible"
+                onmouseout="reset()"></div>
+            <div id="dropdown_profile_x" class="absolute w-full h-full invisible">
+                <div id="dropdown_profile_X" onmouseover="rotate()" onclick="window.location.href='profile'"
+                class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center bg-gray-300 hover:bg-gray-400 opacity-0 transition-all duration-200 ease-in-out rotate-180 cursor-pointer"
+                data-tooltip-target="tooltip-x" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                    </svg>
+                    <div id="tooltip-x" role="tooltip" onmouseover="reset()"
+                        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                        <p>Profile</p>
+                        <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
+                </div>
+            </div>
+            <div id="dropdown_profile_y" class="absolute w-full h-full invisible">
+                <div id="dropdown_profile_Y" onmouseover="rotate()"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center bg-gray-300 hover:bg-gray-400 opacity-0 transition-all duration-200 ease-in-out cursor-not-allowed"
+                    data-tooltip-target="tooltip-y" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                    <div id="tooltip-y" role="tooltip" onmouseover="reset()"
+                        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                        <p class="rotate-180">Setting</p>
+                        <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
+                </div>
+            </div>
+            <div id="dropdown_profile_z" class="absolute w-full h-full invisible">
+                <div id="dropdown_profile_Z" onmouseover="rotate()" onclick="window.location.href='logout'"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center bg-gray-300 hover:bg-gray-400 opacity-0 transition-all duration-200 ease-in-out cursor-pointer"
+                    data-tooltip-target="tooltip-z" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+                    </svg>
+                    <div id="tooltip-z" role="tooltip" onmouseover="reset()"
+                        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                        <p class="rotate-180">Logout</p>
+                        <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    function rotate() {
+    document.getElementById("dropdown_profile_diameter").classList.add("dropdown_profile_hover");
+    document.getElementById("dropdown_profile_X").classList.add("opacity-100");
+    document.getElementById("dropdown_profile_X").classList.add("visible");
+    document.getElementById("dropdown_profile_X").classList.remove("opacity-0");
+    document.getElementById("dropdown_profile_X").classList.remove("invisible");
+    document.getElementById("dropdown_profile_Y").classList.add("opacity-100");
+    document.getElementById("dropdown_profile_Y").classList.add("visible");
+    document.getElementById("dropdown_profile_Y").classList.remove("opacity-0");
+    document.getElementById("dropdown_profile_Y").classList.remove("invisible");
+    document.getElementById("dropdown_profile_Z").classList.add("opacity-100");
+    document.getElementById("dropdown_profile_Z").classList.add("visible");
+    document.getElementById("dropdown_profile_Z").classList.remove("opacity-0");
+    document.getElementById("dropdown_profile_Z").classList.remove("invisible");
+
+    document.getElementById("dropdown_profile_hover-zone").classList.add("visible");
+    document.getElementById("dropdown_profile_hover-zone").classList.remove("invisible");
+}
+
+function reset() {
+    document.getElementById("dropdown_profile_diameter").classList.remove("dropdown_profile_hover");
+    document.getElementById("dropdown_profile_X").classList.add("opacity-0");
+    document.getElementById("dropdown_profile_X").classList.remove("opacity-100");
+    document.getElementById("dropdown_profile_Y").classList.add("opacity-0");
+    document.getElementById("dropdown_profile_Y").classList.remove("opacity-100");
+    document.getElementById("dropdown_profile_Z").classList.add("opacity-0");
+    document.getElementById("dropdown_profile_Z").classList.remove("opacity-100");
+}
+
+document.getElementById("dropdown_profile_X").addEventListener("transitionend", function() {
+    if(this.classList.contains("opacity-0")) {
+        document.getElementById("dropdown_profile_X").classList.add("invisible");
+        document.getElementById("dropdown_profile_X").classList.remove("visible");
+        document.getElementById("dropdown_profile_Y").classList.add("invisible");
+        document.getElementById("dropdown_profile_Y").classList.remove("visible");
+        document.getElementById("dropdown_profile_Z").classList.add("invisible");
+        document.getElementById("dropdown_profile_Z").classList.remove("visible");
+        document.getElementById("dropdown_profile_hover-zone").classList.add("invisible");
+        document.getElementById("dropdown_profile_hover-zone").classList.remove("visible");
+    }
+});
+</script>

ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py

@@ -0,0 +1,9 @@
+from django_components import component
+
+
+@component.register("dropdown_profile")
+class dropdown_profile(component.Component):
+    template_name = "dropdown_profile/dropdown_profile.html"
+
+
+# {% component "dropdown_profile" %}

ACMAS/app/ACMAS_Web/components/icon/icon.py

@@ -16,7 +16,8 @@ def get_context_data(self, icon, icon_type, icon_class):
 # {% component "icon" icon="" icon_type="" icon_class="" %}
 # icon: "information-circle", ... (same naming as the website: https://heroicons.com/)
 # icon_type: "outline", "solid", "mini"
-# icon_class: defaults with "w-5 h-5", you can add other classes for tailwind "..."
+# icon_class: defaults with "w-5 h-5", to change fill color "fill-gray-100" (svg fill in tailwind),
+#             you can add other classes from tailwind "..."
 
 # NOTE need to load following line at the top of component's html to do nested components
 # {% load component_tags %}

ACMAS/app/ACMAS_Web/templates/_base.html

@@ -94,19 +94,19 @@
   <script async src='{{ GOOGLE_ANALYTICS_URL }}'></script>
   </nav> {% endcomment %}
 
-  <nav class="bg-white border-gray-200">
-    <div class="flex flex-wrap items-center justify-between mx-auto p-4 mr-4">
-      <a href="/">
+  <nav class="bg-white border-gray-200 lg:px-24 md:px-24 sm:px-0">
+    <div class="max-w-screen-xl flex flex-wrap items-center mx-auto p-4">
+      <a class="flex mr-2" href="/">
         <img class="h-9 pr-4" src="../static/img/star.svg" alt="ACMAS star logo">
       </a>
-      <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-dropdown" aria-expanded="false">
+      <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center ml-auto p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-dropdown" aria-expanded="false">
           <span class="sr-only">Open main menu</span>
           <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
           </svg>
       </button>
       <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
-        <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white">
+        <ul class="flex flex-col mr-auto font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white">
           <li>
             <a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/">Home</a>
           </li>
@@ -140,40 +140,61 @@
           {% endif %}
           {% if user.is_authenticated %}
             {% block user %}
-              <!-- Logout -->
-              <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/logout">Logout</a></li>
-              <!-- Hello Username-->
-              <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/profile">{{ user.username }}</a></li>
+              <!-- Profile -->
+              <li class="absolute right-32 hidden md:block">{% component "dropdown_profile" %}</li>
+              <li class="pt-2 block md:hidden">
+                <button id="profileDropdownNavbarLink" data-dropdown-toggle="profileDropdownNavbar" class="flex items-center justify-between w-full py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto">User Menu<svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/></svg></button>
+                  <!-- Dropdown menu -->
+                <div id="profileDropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
+                  <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
+                    <li>
+                      <a href="/profile" class="block px-4 py-2 hover:bg-gray-100">Profile</a>
+                    </li>
+                    <li>
+                      <a href="/" class="block px-4 py-2 hover:bg-gray-100 cursor-not-allowed">Setting</a>
+                    </li>
+                    <li>
+                      <a href="/logout" class="block px-4 py-2 hover:bg-gray-100">Logout</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+
+            </ul>
             {% endblock %}
           {% else %}
             {% block anon %}
-            <!-- Register -->
-            <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/register">Register</a></li>
-            <!-- Hello Username-->
-            <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/login">Login</a></li>
+              <!-- Register -->
+              <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/register">Register</a></li>
+              <!-- Hello Username -->
+              <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/login">Login</a></li>
+            </ul>
             {% endblock %}
           {% endif %}
-        </ul>
+
       </div>
     </div>
   </nav>
   <div>
     {% block content %}
     {% endblock content %}
   </div>
+  <footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-white md:flex md:items-center md:justify-between md:p-6">
+    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400"></span>
+    <ul class="flex flex-wrap items-center justify-items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
+      <li class="mr-6">
+          <a href="https://github.com/ACMAS/ACMAS-Frontend"><img class="xl:h-6 h-4 text-gray-500" src="../static/img/github.png" alt="github"></a>
+      </li>
+      <li class="mr-4 filter invert">
+        <a href="https://new.rcos.io/"><img class="xl:h-6 h-4 text-gray-500" src="../static/img/RCOS.png" alt="RCOS"></a>
+      </li>
+    </ul>
+  </footer>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
 </body>
 
-<footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-white md:flex md:items-center md:justify-between md:p-6">
-  <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400"></span>
-  <ul class="flex flex-wrap items-center justify-items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
-    <li class="mr-6">
-        <a href="https://github.com/ACMAS/ACMAS-Frontend"><img class="xl:h-6 h-4 text-gray-500" src="../static/img/github.png" alt="github"></a>
-    </li>
-    <li class="mr-4 filter invert">
-      <a href="https://new.rcos.io/"><img class="xl:h-6 h-4 text-gray-500" src="../static/img/RCOS.png" alt="RCOS"></a>
-    </li>
-  </ul>
-</footer>
+
 {% endblock body %}
 
 </html>