Skip to content

Commit

Permalink
New dropdown style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Dec 5, 2021
1 parent ba9e964 commit c322e16
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 31 deletions.
15 changes: 8 additions & 7 deletions app/application/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,18 +233,19 @@ <h4>Save your code(s) to your computer for future use.</h4>
<div class="search_container relative inline-block">
<input name="search" spellcheck="false" id="search" class="input w-80 hidden text-2xl mb-1" onkeyup="search()" onkeydown="search()" />
<!-- search icon -->
<svg id="search_icon" xmlns="http://www.w3.org/2000/svg" class="hidden searchIcon h-6 w-6 relative top-[-50px] right-[150px] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="black">
<svg id="searchIcon" xmlns="http://www.w3.org/2000/svg" class="hidden searchIcon h-6 w-6 relative top-[-50px] right-[150px] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<!-- filter icon -->
<svg id="filter_icon" onclick="dropdown()" xmlns="http://www.w3.org/2000/svg" class="hidden searchIcon h-6 w-6 relative top-[-50px] left-[150px] cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="black">
<path id="filter_path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
<svg id="filterIcon" onclick="dropdown()" xmlns="http://www.w3.org/2000/svg" class="hidden searchIcon h-6 w-6 relative top-[-50px] left-[150px] cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="black">
<path id="filterPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
<br />
<!-- dropdown -->
<div class="dropdown-content animation">
<a tabindex="-1" id="link0" class="dropdown-link" href="#"> <input type="checkbox" tabindex="-1" id="checkbox0" name="checkbox1" class="checkbox" /> Name </a>
<a tabindex="-1" id="link1" class="dropdown-link" href="#"> <input type="checkbox" tabindex="-1" id="checkbox1" name="checkbox1" class="checkbox" /> Description </a>
<div class="relative inline-block">
<div id="dropdownContent0" class="animation hidden absolute -top-8 left-6 z-20 w-48 mt-2 bg-white rounded-2xl overflow-hidden border-white border-2">
<a href="#" class="cursor-default block no-underline text-xl px-2 py-2 transform duration-200 ease-in text-black"> <input type="checkbox" tabindex="-1" id="checkbox0" name="checkbox1" class="checkbox" /> Name </a>
<a href="#" class="cursor-default block no-underline text-xl px-2 py-2 transform duration-200 ease-in text-black"> <input type="checkbox" tabindex="-1" id="checkbox1" name="checkbox1" class="checkbox" /> Description </a>
</div>
</div>
</div>
<!-- grid -->
Expand Down
12 changes: 6 additions & 6 deletions app/application/src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,8 @@ const go = (data) => {
document.querySelector(".content").style.top = "80px"
document.querySelector("#choose").style.display = "none"
document.querySelector("#starting").style.display = "none"
document.querySelector("#search_icon").style.display = "inline-block"
document.querySelector("#filter_icon").style.display = "inline-block"
document.querySelector("#searchIcon").style.display = "inline-block"
document.querySelector("#filterIcon").style.display = "inline-block"

const names = data.names
const secrets = data.secrets
Expand Down Expand Up @@ -781,7 +781,7 @@ if (settings.security.require_password === false) {
let dropdown_state = false
// ? dropdown
const dropdown = () => {
const dropdown_content = document.querySelector(".dropdown-content")
const dropdown_content = document.querySelector("#dropdownContent0")

if (dropdown_state === false) {
dropdown_content.style.visibility = "visible"
Expand Down Expand Up @@ -883,9 +883,9 @@ const sampleImport = () => {

// ? dismiss dialog on click outside
window.addEventListener("click", (event) => {
const dropdown_content = document.querySelector(".dropdown-content")
const filter = document.querySelector("#filter_icon")
const filter_path = document.querySelector("#filter_path")
const dropdown_content = document.querySelector("#dropdownContent0")
const filter = document.querySelector("#filterIcon")
const filter_path = document.querySelector("#filterPath")
const checkbox0 = document.querySelector("#checkbox0")
const checkbox1 = document.querySelector("#checkbox1")
const link0 = document.querySelector("#link0")
Expand Down
25 changes: 14 additions & 11 deletions app/settings/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -931,34 +931,37 @@ <h4>
<div id="experimental" class="tabcontent part hidden">
<h3>Sort codes</h3>
<h4>You can choose how to sort the codes. By default codes are sorted by importing order.</h4>
<div class="dropdown">
<button class="dropdown-button" id="drp0" onclick="dropdown()">
<svg id="sort_svg" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="sort_path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />

<div class="relative inline-block">
<button id="dropdownButton0" class="buttoni" onclick="dropdown()">
<svg id="sortSvg" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="sortPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
</svg>
Default
</button>
<div class="dropdown-content animation">
<a tabindex="0" id="link0" class="dropdown-link" href="#" onclick="dropdownChoose(0)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<div id="dropdownContent0" class="animation hidden absolute right-0 z-20 w-72 mt-2 bg-white rounded-2xl overflow-hidden border-white border-2">
<a href="#" onclick="dropdownChoose(0)" class="block no-underline text-xl px-2 py-2 transform duration-200 ease-in text-black hover:bg-gray-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
</svg>
Default
</a>
<a tabindex="0" id="link1" class="dropdown-link" href="#" onclick="dropdownChoose(1)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<a href="#" onclick="dropdownChoose(1)" class="block no-underline text-xl px-2 py-2 transform duration-200 ease-in text-black hover:bg-gray-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
</svg>
A-Z
</a>
<a tabindex="0" id="link2" class="dropdown-link" href="#" onclick="dropdownChoose(2)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<a href="#" onclick="dropdownChoose(2)" class="block no-underline text-xl px-2 py-2 transform duration-200 ease-in text-black hover:bg-gray-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
</svg>
Z-A
</a>
</div>
</div>

<h4 class="text-popup-yellow font-bold mb-0">This feature is WIP! It might be unstable or buggy!</h4>
<!--
<br />
Expand Down
14 changes: 7 additions & 7 deletions app/settings/src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const currentWindow = BrowserWindow.getFocusedWindow()

// ? elements
const inp0 = document.querySelector("#inp0")
const drp0 = document.querySelector("#drp0")
const drp0 = document.querySelector("#dropdownButton0")

const tgl0 = document.querySelector("#tgl0")
const tgt0 = document.querySelector("#tgt0")
Expand Down Expand Up @@ -504,7 +504,7 @@ const hardware = () => {
let dropdown_state = false
// ? dropdown
const dropdown = (id) => {
const dropdown_content = document.querySelector(".dropdown-content")
const dropdown_content = document.querySelector("#dropdownContent0")

if (dropdown_state === false) {
dropdown_content.style.visibility = "visible"
Expand All @@ -522,7 +522,7 @@ const dropdown = (id) => {
}

const dropdownChoose = (id) => {
const dropdown_button = document.querySelector(".dropdown-button")
const dropdown_button = document.querySelector("#dropdownButton0")

const sort = () => {
switch (id) {
Expand Down Expand Up @@ -853,10 +853,10 @@ setInterval(() => {

// ? dismiss dialog on click outside
window.addEventListener("click", (event) => {
const dropdown_content = document.querySelector(".dropdown-content")
const dropdown_button = document.querySelector(".dropdown-button")
const sort_svg = document.querySelector("#sort_svg")
const sort_path = document.querySelector("#sort_path")
const dropdown_content = document.querySelector("#dropdownContent0")
const dropdown_button = document.querySelector("#dropdownButton0")
const sort_svg = document.querySelector("#sortSvg")
const sort_path = document.querySelector("#sortPath")
const link0 = document.querySelector("#link0")
const link1 = document.querySelector("#link1")
const link2 = document.querySelector("#link2")
Expand Down

0 comments on commit c322e16

Please sign in to comment.