Skip to content

Commit

Permalink
improve styling of collection create button in FormData
Browse files Browse the repository at this point in the history
Place it right next to the buttons for choosing between batch or singular collection
  • Loading branch information
ahmedhamidawan committed Oct 1, 2024
1 parent f419cea commit 568037e
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 31 deletions.
23 changes: 13 additions & 10 deletions client/src/components/Common/ButtonSpinner.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
<script setup lang="ts">
import { library } from "@fortawesome/fontawesome-svg-core";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faPlay, faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { BButton } from "bootstrap-vue";
library.add(faPlay, faSpinner);
interface Props {
title: string;
title?: string;
wait?: boolean;
tooltip?: string;
disabled?: boolean;
variant?: string;
hasPlayIcon?: boolean;
icon?: IconDefinition;
}
withDefaults(defineProps<Props>(), {
title: "",
wait: false,
tooltip: "",
disabled: false,
variant: "primary",
hasPlayIcon: true,
icon: undefined,
});
</script>

Expand All @@ -32,8 +31,10 @@ withDefaults(defineProps<Props>(), {
variant="info"
title="Please Wait..."
class="d-flex flex-nowrap align-items-center text-nowrap">
<FontAwesomeIcon :icon="faSpinner" class="mr-2" spin />
<slot>{{ title }}</slot>
<FontAwesomeIcon :icon="faSpinner" fixed-width spin />
<slot>
<span v-if="title">{{ title }}</span>
</slot>
</BButton>
<BButton
v-else
Expand All @@ -43,7 +44,9 @@ withDefaults(defineProps<Props>(), {
:title="tooltip"
:disabled="disabled"
@click="$emit('onClick')">
<FontAwesomeIcon v-if="hasPlayIcon" :icon="faPlay" class="mr-2" />
<slot>{{ title }}</slot>
<FontAwesomeIcon :icon="!icon ? faPlay : icon" fixed-width />
<slot>
<span v-if="title">{{ title }}</span>
</slot>
</BButton>
</template>
31 changes: 12 additions & 19 deletions client/src/components/Form/Elements/FormData/FormData.vue
Original file line number Diff line number Diff line change
Expand Up @@ -656,6 +656,18 @@ const noOptionsWarningMessage = computed(() => {
<FontAwesomeIcon v-if="loading" icon="fa-spinner" spin />
<span v-else class="font-weight-bold">...</span>
</BButton>
<BButtonGroup v-if="effectiveCollectionTypes?.length > 0" size="sm" buttons>
<ButtonSpinner
v-for="collectionType in effectiveCollectionTypes"
:key="collectionType"
:tooltip="collectionType"
variant="secondary"
:disabled="isFetchingItems"
:icon="faPlus"
:wait="isFetchingItems"
@onClick="buildNewCollection(collectionType)">
</ButtonSpinner>
</BButtonGroup>
</BButtonGroup>
<div v-if="extensions && extensions.length > 0">
<BButton :id="formatsButtonId" class="ui-link" @click="formatsVisible = !formatsVisible">
Expand Down Expand Up @@ -689,25 +701,6 @@ const noOptionsWarningMessage = computed(() => {
{{ noOptionsWarningMessage }}
</BAlert>
</template>
<!-- TODO: Improve styling, weirdly positioned to right of select -->
<template v-slot:right-actions>
<div>
<BButtonGroup v-if="effectiveCollectionTypes?.length > 0" size="sm" buttons>
<ButtonSpinner
v-for="collectionType in effectiveCollectionTypes"
:key="collectionType"
:title="collectionType"
variant="secondary"
:disabled="isFetchingItems"
:has-play-icon="false"
:wait="isFetchingItems"
@onClick="buildNewCollection(collectionType)">
<FontAwesomeIcon v-if="!isFetchingItems" :icon="faPlus" fixed-width />
{{ collectionType }}
</ButtonSpinner>
</BButtonGroup>
</div>
</template>
</FormSelect>
<FormSelection
v-else-if="currentVariant?.multiple"
Expand Down
3 changes: 1 addition & 2 deletions client/src/components/Form/Elements/FormSelect.vue
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ onMounted(() => {
</script>

<template>
<div class="d-flex justify-content-between align-items-center">
<div>
<Multiselect
v-if="hasOptions"
:id="id"
Expand Down Expand Up @@ -182,6 +182,5 @@ onMounted(() => {
<slot v-else name="no-options">
<b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
</slot>
<slot name="right-actions" />
</div>
</template>

0 comments on commit 568037e

Please sign in to comment.