mirror/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
Code Issues Projects Releases Wiki Activity

fix: popups and dropdowns

Browse Source
This commit is contained in:
Ferdinand Mütsch
2021-12-16 18:50:12 +01:00
parent 62e3decf0f
commit 6a5f08dc95
5 changed files with 52 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/foot.tpl.html
View File

@@ -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>

53
views/menu-main.tpl.html
View File

@@ -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>

14
views/settings.tpl.html
View File

@@ -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">