Skip to content

Commit

Permalink
refactor: better implimentation for slots
Browse files Browse the repository at this point in the history
  • Loading branch information
@liyasthomas
liyasthomas committed Jun 30, 2021
1 parent 0dd0d26 commit b750ccd
Show file tree
Hide file tree
Showing 46 changed files with 1,138 additions and 752 deletions.
21 changes: 9 additions & 12 deletions components/app/Extensions.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<p class="info">
{{ $t("extensions_info1") }}
</p>
Expand Down Expand Up @@ -70,8 +68,7 @@
</button>
</a>
</div>
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

Expand Down
2 changes: 1 addition & 1 deletion components/app/Footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<button v-tooltip="$t('choose_language')" class="icon button">
<i class="material-icons">translate</i>
</button>
<template slot="popover">
<template #popover>
<div v-for="locale in availableLocales" :key="locale.code">
<nuxt-link :to="switchLocalePath(locale.code)">
<button v-close-popover class="icon button">
Expand Down
6 changes: 3 additions & 3 deletions components/app/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<button v-tooltip="$t('login_with')" class="icon button">
<i class="material-icons">login</i>
</button>
<template slot="popover">
<template #popover>
<FirebaseLogin @show-email="showEmail = true" />
</template>
</v-popover>
Expand All @@ -94,7 +94,7 @@
/>
<i v-else class="material-icons">account_circle</i>
</button>
<template slot="popover">
<template #popover>
<div>
<nuxt-link v-close-popover :to="localePath('settings')">
<button class="icon button">
Expand All @@ -114,7 +114,7 @@
<button v-tooltip="$t('more')" class="icon button">
<i class="material-icons">drag_indicator</i>
</button>
<template slot="popover">
<template #popover>
<button
v-close-popover
class="icon button"
Expand Down
21 changes: 9 additions & 12 deletions components/app/Shortcuts.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="p-2">
<div>
<kbd>{{ getSpecialKey() }}</kbd>
Expand Down Expand Up @@ -68,8 +66,7 @@
<label>{{ $t("select_delete_method") }}</label>
</div>
</div>
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

Expand Down
21 changes: 9 additions & 12 deletions components/app/Support.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("support_us") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("support_us") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<AppContributors />
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

Expand Down
44 changes: 20 additions & 24 deletions components/collections/Add.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
Expand All @@ -20,20 +18,18 @@
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

Expand Down
44 changes: 20 additions & 24 deletions components/collections/AddFolder.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
Expand All @@ -20,20 +18,18 @@
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

Expand Down
44 changes: 20 additions & 24 deletions components/collections/Edit.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
Expand All @@ -20,20 +18,18 @@
:placeholder="placeholderCollName"
@keyup.enter="saveCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

Expand Down
44 changes: 20 additions & 24 deletions components/collections/EditFolder.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
Expand All @@ -19,20 +17,18 @@
type="text"
@keyup.enter="editFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

Expand Down
Loading

0 comments on commit b750ccd

Please sign in to comment.