mirror of
https://github.com/muety/wakapi.git
synced 2023-08-10 21:12:56 +03:00
fix: popups and dropdowns
This commit is contained in:
Ferdinand Mütsch
parent
62e3decf0f
commit
6a5f08dc95
@ -2,6 +2,10 @@ body {
|
||||
font-family: 'Source Sans 3', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg-gray-850 {
|
||||
background-color: #242b3a;
|
||||
}
|
||||
|
||||
@ -20,4 +20,3 @@ Iconify.addCollection({"prefix":"fa-solid","icons":{"external-link-alt":{"body":
|
||||
Iconify.addCollection({"prefix":"simple-icons","icons":{"wakatime":{"body":"<path d=\"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12s12-5.373 12-12S18.627 0 12 0zm0 2.824a9.176 9.176 0 1 1 0 18.352a9.176 9.176 0 0 1 0-18.352zm5.097 5.058c-.327 0-.61.19-.764.45c-1.025 1.463-2.21 3.162-3.288 4.706l-.387-.636a.897.897 0 0 0-.759-.439a.901.901 0 0 0-.788.492l-.357.581l-1.992-2.943a.897.897 0 0 0-.761-.446c-.514 0-.903.452-.903.96a1 1 0 0 0 .207.61l2.719 3.96c.152.272.44.47.776.47a.91.91 0 0 0 .787-.483c.046-.071.23-.368.314-.504l.324.52c-.035-.047.076.113.087.13c.024.031.054.059.078.085c.019.019.04.036.058.052c.036.033.08.056.115.08c.025.016.052.028.076.04c.029.015.06.024.088.035c.058.025.122.027.18.04c.031.004.064.003.092.005c.29 0 .546-.149.707-.36c1.4-2 2.842-4.055 4.099-5.849A.995.995 0 0 0 18 8.842c0-.508-.389-.96-.903-.96\" fill=\"currentColor\"/>"}},"width":24,"height":24});
|
||||
Iconify.addCollection({"prefix":"heroicons-solid","icons":{"light-bulb":{"body":"<g fill=\"none\"><path d=\"M11 3a1 1 0 1 0-2 0v1a1 1 0 1 0 2 0V3z\" fill=\"currentColor\"/><path d=\"M15.657 5.757a1 1 0 0 0-1.414-1.414l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707z\" fill=\"currentColor\"/><path d=\"M18 10a1 1 0 0 1-1 1h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" fill=\"currentColor\"/><path d=\"M5.05 6.464A1 1 0 1 0 6.464 5.05l-.707-.707a1 1 0 0 0-1.414 1.414l.707.707z\" fill=\"currentColor\"/><path d=\"M5 10a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1z\" fill=\"currentColor\"/><path d=\"M8 16v-1h4v1a2 2 0 1 1-4 0z\" fill=\"currentColor\"/><path d=\"M12 14c.015-.34.208-.646.477-.859a4 4 0 1 0-4.954 0c.27.213.462.519.476.859h4.002z\" fill=\"currentColor\"/></g>"},"server":{"body":"<g fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5zm14 1a1 1 0 1 1-2 0a1 1 0 0 1 2 0z\" fill=\"currentColor\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2zm14 1a1 1 0 1 1-2 0a1 1 0 0 1 2 0z\" fill=\"currentColor\"/></g>"}},"width":20,"height":20});
|
||||
Iconify.addCollection({"prefix":"ion","icons":{"rocket":{"body":"<path d=\"M328.85 156.79a26.69 26.69 0 1 0 18.88 7.81a26.6 26.6 0 0 0-18.88-7.81z\" fill=\"currentColor\"/><path d=\"M477.44 50.06a.29.29 0 0 1 0-.09a20.4 20.4 0 0 0-15.13-15.3c-29.8-7.27-76.68.48-128.63 21.28c-52.36 21-101.42 52-134.58 85.22A320.7 320.7 0 0 0 169.55 175c-22.33-1-42 2.18-58.57 9.41c-57.74 25.41-74.23 90.44-78.62 117.14a25 25 0 0 0 27.19 29h.13l64.32-7.02c.08.82.17 1.57.24 2.26a34.36 34.36 0 0 0 9.9 20.72l31.39 31.41a34.27 34.27 0 0 0 20.71 9.91l2.15.23l-7 64.24v.13A25 25 0 0 0 206 480a25.25 25.25 0 0 0 4.15-.34C237 475.34 302 459.05 327.34 401c7.17-16.46 10.34-36.05 9.45-58.34a314.78 314.78 0 0 0 33.95-29.55c33.43-33.26 64.53-81.92 85.31-133.52c20.69-51.36 28.48-98.59 21.39-129.53zM370.38 224.94a58.77 58.77 0 1 1 0-83.07a58.3 58.3 0 0 1 0 83.07z\" fill=\"currentColor\"/><path d=\"M161.93 386.44a16 16 0 0 0-11 2.67c-6.39 4.37-12.81 8.69-19.29 12.9c-13.11 8.52-28.79-6.44-21-20l12.15-21a16 16 0 0 0-15.16-24.91A61.25 61.25 0 0 0 72 353.56c-3.66 3.67-14.79 14.81-20.78 57.26A357.94 357.94 0 0 0 48 447.59A16 16 0 0 0 64 464h.4a359.87 359.87 0 0 0 36.8-3.2c42.47-6 53.61-17.14 57.27-20.8a60.49 60.49 0 0 0 17.39-35.74a16 16 0 0 0-13.93-17.82z\" fill=\"currentColor\"/>"}},"width":512,"height":512});
|
||||
Iconify.addCollection({"prefix":"clarity","icons":{"warning-standard-solid":{"body":"<path class=\"clr-i-solid clr-i-solid-path-1\" d=\"M34.6 29.21L20.71 3.65a3.22 3.22 0 0 0-5.66 0L1.17 29.21A3.22 3.22 0 0 0 4 34h27.77a3.22 3.22 0 0 0 2.83-4.75zM16.6 10a1.4 1.4 0 0 1 2.8 0v12a1.4 1.4 0 0 1-2.8 0zM18 29.85a1.8 1.8 0 1 1 1.8-1.8a1.8 1.8 0 0 1-1.8 1.8z\" fill=\"currentColor\"/>"}},"width":36,"height":36});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script src="assets/app.js"></script>
|
||||
<script src="assets/vendor/iconify.basic.min.js"></script>
|
||||
<script src="assets/vendor/seedrandom.min.js"></script>
|
||||
<script src="assets/vendor/chart.min.js"></script>
|
||||
<script src="assets/icons.js"></script>
|
||||
<script src="assets/app.js"></script>
|
||||
|
||||
@ -1,4 +1,29 @@
|
||||
<div class="flex justify-between space-x-4 items-center relative" id="main-menu">
|
||||
<script type="module">
|
||||
function findParentAttribute(el, attrName) {
|
||||
if (el.attributes[attrName]) return el.attributes[attrName]
|
||||
if (!el.parentNode || !el.parentNode.attributes) return null
|
||||
return findParentAttribute(el.parentNode, attrName)
|
||||
}
|
||||
|
||||
PetiteVue.createApp({
|
||||
$delimiters: ['${', '}'],
|
||||
state: {
|
||||
showDropdownResources: false,
|
||||
showDropdownUser: false,
|
||||
showApiKey: false
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('click', (e) => {
|
||||
const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
|
||||
Object.keys(this.state).forEach(k => {
|
||||
if (k !== skip) this.state[k] = false
|
||||
})
|
||||
})
|
||||
}
|
||||
}).mount('#main-menu')
|
||||
</script>
|
||||
|
||||
<div class="flex justify-between space-x-4 items-center relative" id="main-menu" v-scope @vue:mounted="mounted">
|
||||
<div class="mr-8">
|
||||
{{ template "logo.tpl.html" }}
|
||||
</div>
|
||||
@ -24,33 +49,33 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer relative" onclick="togglePopup(event, 'resources-menu-dropdown')">
|
||||
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer relative" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
|
||||
<span class="iconify inline text-2xl text-gray-400" data-icon="ph:books-bold"></span>
|
||||
<a class="text-gray-400">Resources</a>
|
||||
<span class="iconify inline text-xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
|
||||
|
||||
<div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown">
|
||||
<div v-cloak v-show="state.showDropdownResources" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown">
|
||||
<div class="flex-grow flex flex-col">
|
||||
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
|
||||
<span class="text-sm">GitHub</span>
|
||||
<span class="iconify inline" data-icon="codicon:github-inverted"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="swagger-ui" onclick="togglePopup(event, 'resources-menu-dropdown')">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="swagger-ui" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
|
||||
<span class="text-sm">API Docs</span>
|
||||
<span class="iconify inline" data-icon="bx:bx-code-curly"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
|
||||
<span class="text-sm">WakaTime</span>
|
||||
<span class="iconify inline" data-icon="simple-icons:wakatime"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" target="_blank" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
|
||||
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
|
||||
<span class="text-sm">Donate</span>
|
||||
<span class="iconify inline" data-icon="bx:bxs-heart"></span>
|
||||
</a>
|
||||
@ -66,7 +91,7 @@
|
||||
|
||||
<div class="flex-grow"></div>
|
||||
|
||||
<div class="menu-item flex items-center text-sm font-semibold space-x-3 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer relative" onclick="togglePopup(event, 'user-menu-popup')">
|
||||
<div class="menu-item flex items-center text-sm font-semibold space-x-3 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer relative" @click="state.showDropdownUser = !state.showDropdownUser" data-trigger-for="showDropdownUser">
|
||||
<div class="flex flex-col text-right">
|
||||
<a class="text-gray-300">{{ .User.ID }}</a>
|
||||
{{ if .User.Email }}
|
||||
@ -76,13 +101,13 @@
|
||||
{{ if avatarUrlTemplate }}
|
||||
<img src="{{ .User.AvatarURL avatarUrlTemplate }}" width="32px" class="rounded-full border-green-700" alt="User Profile Avatar" title="Looks like you, doesn't it?"/>
|
||||
{{ else }}
|
||||
<span class="iconify inline cursor-pointer text-gray-500 rounded-full border-green-700" style="width: 32px; height: 32px" data-icon="ic:round-person" onclick="togglePopup(event, 'user-menu-popup')"></span>
|
||||
<span class="iconify inline cursor-pointer text-gray-500 rounded-full border-green-700" style="width: 32px; height: 32px" data-icon="ic:round-person" @click="state.showDropdownUser = !state.showDropdownUser" data-trigger-for="showDropdownUser"></span>
|
||||
{{ end }}
|
||||
|
||||
<div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-14 w-full" id="user-menu-popup" style="min-width: 156px;">
|
||||
<div v-cloak v-show="state.showDropdownUser" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-14 w-full" id="user-menu-popup" style="min-width: 156px;">
|
||||
<div class="flex-grow flex flex-col">
|
||||
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
|
||||
<button class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" onclick="togglePopup(event, 'api-key-popup'); togglePopup(event, 'user-menu-popup')">
|
||||
<button class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" @click="state.showApiKey = true" data-trigger-for="showApiKey">
|
||||
<span class="text-sm">Show API Key</span>
|
||||
<span class="iconify inline" data-icon="fluent:key-32-filled"></span>
|
||||
</button>
|
||||
@ -99,14 +124,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup" id="api-key-popup">
|
||||
<div v-cloak v-show="state.showApiKey" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup" id="api-key-popup">
|
||||
<div class="flex-grow flex flex-col px-2">
|
||||
<span class="text-xxs text-gray-500 mx-1">API Key</span>
|
||||
<input type="text" class="bg-transparent text-sm text-white mx-1 font-mono" id="api-key-container" readonly
|
||||
value="{{ .ApiKey }}" style="min-width: 330px">
|
||||
</div>
|
||||
<div class="flex items-center px-2 border-l border-gray-700">
|
||||
<button title="Copy to clipboard" onclick="copyApiKey(event)"><span class="iconify inline text-gray-300" data-icon="majesticons:clipboard-copy"></span></button>
|
||||
<button title="Copy to clipboard" onclick="copyApiKey(event)">
|
||||
<span class="iconify inline text-gray-300" data-icon="majesticons:clipboard-copy"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,7 +48,7 @@
|
||||
this.updateTab()
|
||||
window.addEventListener('hashchange', () => this.updateTab())
|
||||
}
|
||||
}).mount()
|
||||
}).mount('#settings-page')
|
||||
</script>
|
||||
|
||||
<body class="bg-gray-900 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
{{ template "alerts.tpl.html" . }}
|
||||
|
||||
<main class="mt-10 flex-grow flex justify-center w-full" v-scope @vue:mounted="mounted">
|
||||
<main class="mt-10 flex-grow flex justify-center w-full" v-scope @vue:mounted="mounted" id="settings-page">
|
||||
<div class="flex flex-col flex-grow mt-10">
|
||||
<h1 class="font-semibold text-3xl text-white m-0 mb-4">Settings</h1>
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="account" class="tab flex flex-col space-y-4" v-if="isActive('account')">
|
||||
<div v-cloak id="account" class="tab flex flex-col space-y-4" v-if="isActive('account')">
|
||||
<!-- Account Settings -->
|
||||
<form action="" method="post" class="w-3/4">
|
||||
<input type="hidden" name="action" value="update_user">
|
||||
@ -197,7 +197,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="data" class="tab flex flex-col space-y-4" v-if="isActive('data')">
|
||||
<div v-cloak id="data" class="tab flex flex-col space-y-4" v-if="isActive('data')">
|
||||
<!-- Aliases -->
|
||||
<div class="w-full">
|
||||
<div class="flex mb-8">
|
||||
@ -395,7 +395,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="permissions" class="tab flex flex-col space-y-4" v-if="isActive('permissions')">
|
||||
<div v-cloak id="permissions" class="tab flex flex-col space-y-4" v-if="isActive('permissions')">
|
||||
<!-- Public Data -->
|
||||
<form action="" method="post" class="w-3/4">
|
||||
<div class="flex mb-8">
|
||||
@ -515,7 +515,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="integrations" class="tab flex flex-col space-y-4" v-if="isActive('integrations')">
|
||||
<div v-cloak id="integrations" class="tab flex flex-col space-y-4" v-if="isActive('integrations')">
|
||||
<form action="" method="post" class="w-3/4">
|
||||
<input type="hidden" name="action" value="toggle_wakatime">
|
||||
|
||||
@ -634,7 +634,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="danger_zone" class="tab flex flex-col space-y-4" v-if="isActive('danger_zone')">
|
||||
<div v-cloak id="danger_zone" class="tab flex flex-col space-y-4" v-if="isActive('danger_zone')">
|
||||
<div class="w-3/4">
|
||||
<form action="" method="post" class="flex mb-8" id="form-regenerate-summaries">
|
||||
<input type="hidden" name="action" value="regenerate_summaries">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user