Skip to content

Commit

Permalink
* Give short url textbox a little more room on Account Settings.
Browse files Browse the repository at this point in the history
* Add tooltips to text-buttons, they trigger on hover and focus.
  • Loading branch information
MelissaAutumn committed Jun 11, 2024
1 parent cca83e3 commit 8c32443
Showing 2 changed files with 10 additions and 1 deletion.
2 changes: 1 addition & 1 deletion frontend/src/components/SettingsAccount.vue
Original file line number Diff line number Diff line change
@@ -58,7 +58,7 @@
<icon-external-link class="size-5"/>
</a>
</div>
<text-button :label="t('label.copyLink')" :copy="user.myLink"/>
<text-button :tooltip="t('label.copyLink')" :copy="user.myLink"/>
</div>
</label>
<div class="mt-6 flex gap-4 self-end">
9 changes: 9 additions & 0 deletions frontend/src/elements/TextButton.vue
Original file line number Diff line number Diff line change
@@ -6,6 +6,10 @@
hover:shadow-md dark:text-gray-400 dark:hover:bg-gray-800
"
@click.stop="copy ? copyToClipboard() : null"
@mouseover="hover = true"
@mouseout="hover = false"
@focusin="hover = true"
@focusout="hover = false"
>
<icon-copy
v-if="copy && !copied"
@@ -19,6 +23,9 @@
<transition>
<tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
</transition>
<transition>
<tool-tip class="w-24" v-show="hover && tooltip && !copied" :content="tooltip" />
</transition>
</button>
</template>

@@ -36,11 +43,13 @@ const { t } = useI18n();
// component properties
const props = defineProps({
label: String, // button text
tooltip: String, // optional tooltip
copy: String, // text to copy to clipboard
});
// state for copy click
const copied = ref(false);
const hover = ref(false);
// copy text to clipboard
const copyToClipboard = async () => {

0 comments on commit 8c32443

Please sign in to comment.