Skip to content

Commit

Permalink
feat: rotating profile dropdown
Browse files Browse the repository at this point in the history 
- added script to _base.html
- added profile dropdown
- need to add on hover effects for the icons
  • Loading branch information
@RuikangRPI
RuikangRPI committed Nov 3, 2023
1 parent edf258f commit d5ded18
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 46 deletions.
156 changes: 156 additions & 0 deletions ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
{% 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, #dropdown_profile_Y, #dropdown_profile_Z {
background: lightgrey;
}
#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_por {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><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>');
}
#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">
<div 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 visible"
onmouseover="rotate()"></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 opacity-0 transition-opacity duration-200 ease-in-out rotate-180"
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 opacity-0 transition-opacity duration-200 ease-in-out"
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()"
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 opacity-0 transition-opacity duration-200 ease-in-out"
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">Sign Out</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>
14 changes: 14 additions & 0 deletions ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
from django_components import component


@component.register("dropdown_profile")
class dropdown_profile(component.Component):
template_name = "dropdown_profile/dropdown_profile.html"



# {% component "dropdown_profile" profile_icon="" %}
#

# NOTE need to load following line at the top of component's html to do nested components
# {% load component_tags %}
Binary file added ACMAS/app/ACMAS_Web/components/dropdown_profile/example/.DS_Store
View file
Binary file not shown.
Loading

0 comments on commit d5ded18

Please sign in to comment.