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,188 @@
+{% 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">
+                {% if user.is_superuser %}
+                <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-pointer"
+                    data-tooltip-target="tooltip-y" data-tooltip-placement="top">
+                {% else %}
+                <div id="dropdown_profile_Y" onmouseover="rotate()" onclick="toggleBrightness()"
+                    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-y" data-tooltip-placement="top">
+                {% endif %}
+                    {% if user.is_superuser %}
+                    <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>
+                    {% else %}
+                    <svg id="brightness_toggle" 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 light_toggle">
+                        <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+                    </svg>
+                    {% endif %}
+                    <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">
+                        {% if user.is_superuser %}
+                            <p class="rotate-180">Setting</p>
+                        {% else %}
+                            <p class="rotate-180">Toggle</p>
+                        {% endif %}
+                        <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");
+    }
+});
+
+function toggleBrightness() {
+    var elem = document.getElementById("brightness_toggle");
+    if(elem.classList.contains("light_toggle")) {
+        elem.classList.remove("light_toggle");
+        elem.classList.add("dark_toggle");
+        elem.innerHTML = '<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />';
+    } else {
+        elem.classList.remove("dark_toggle");
+        elem.classList.add("light_toggle");
+        elem.innerHTML = '<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />';
+    }
+}
+</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 %}