Introduce component wrapper for svg icons

This commit is contained in:
Liyas Thomas
2020-08-17 16:07:36 +05:30
parent 54e06d26bc
commit 3924370b3e
39 changed files with 284 additions and 52 deletions

View File

@@ -7,7 +7,7 @@
<h3 class="title">{{ $t("new_collection") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
<closeIcon class="material-icons" />
</button>
</div>
</div>
@@ -44,8 +44,12 @@
<script>
import { fb } from "~/helpers/fb"
import closeIcon from "~/static/icons/close-24px.svg?inline"
export default {
components: {
closeIcon,
},
props: {
show: Boolean,
},

View File

@@ -7,7 +7,7 @@
<h3 class="title">{{ $t("new_folder") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
<closeIcon class="material-icons" />
</button>
</div>
</div>
@@ -44,8 +44,12 @@
<script>
import { fb } from "~/helpers/fb"
import closeIcon from "~/static/icons/close-24px.svg?inline"
export default {
components: {
closeIcon,
},
props: {
show: Boolean,
collection: Object,

View File

@@ -4,7 +4,7 @@
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren">arrow_right</i>
<i class="material-icons" v-show="showChildren">arrow_drop_down</i>
<i class="material-icons">folder</i>
<folderIcon class="material-icons" />
<span>{{ collection.name }}</span>
</button>
<div>
@@ -35,7 +35,7 @@
</div>
<div>
<button class="icon" @click="removeCollection" v-close-popover>
<i class="material-icons">delete</i>
<deleteIcon class="material-icons" />
<span>{{ $t("delete") }}</span>
</button>
</div>
@@ -98,8 +98,11 @@ ul li {
<script>
import { fb } from "~/helpers/fb"
import folderIcon from "~/static/icons/folder-24px.svg?inline"
import deleteIcon from "~/static/icons/delete-24px.svg?inline"
export default {
components: { folderIcon, deleteIcon },
props: {
collectionIndex: Number,
collection: Object,

View File

@@ -7,7 +7,7 @@
<h3 class="title">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
<closeIcon class="material-icons" />
</button>
</div>
</div>
@@ -44,8 +44,12 @@
<script>
import { fb } from "~/helpers/fb"
import closeIcon from "~/static/icons/close-24px.svg?inline"
export default {
components: {
closeIcon,
},
props: {
show: Boolean,
editingCollection: Object,

View File

@@ -7,7 +7,7 @@
<h3 class="title">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
<closeIcon class="material-icons" />
</button>
</div>
</div>
@@ -39,8 +39,12 @@
<script>
import { fb } from "~/helpers/fb"
import closeIcon from "~/static/icons/close-24px.svg?inline"
export default {
components: {
closeIcon,
},
props: {
show: Boolean,
collection: Object,

View File

@@ -7,7 +7,7 @@
<h3 class="title">{{ $t("edit_request") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
<closeIcon class="material-icons" />
</button>
</div>
</div>
@@ -70,8 +70,12 @@
<script>
import { fb } from "~/helpers/fb"
import closeIcon from "~/static/icons/close-24px.svg?inline"
export default {
components: {
closeIcon,
},
props: {
show: Boolean,
collectionIndex: Number,

View File

@@ -22,7 +22,7 @@
</div>
<div>
<button class="icon" @click="removeFolder" v-close-popover>
<i class="material-icons">delete</i>
<deleteIcon class="material-icons" />
<span>{{ $t("delete") }}</span>
</button>
</div>
@@ -72,8 +72,10 @@ ul li {
<script>
import { fb } from "~/helpers/fb"
import deleteIcon from "~/static/icons/delete-24px.svg?inline"
export default {
components: { deleteIcon },
props: {
folder: Object,
collectionIndex: Number,

View File

@@ -7,7 +7,7 @@
<h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
<closeIcon class="material-icons" />
</button>
</div>
</div>
@@ -77,8 +77,12 @@
<script>
import { fb } from "~/helpers/fb"
import closeIcon from "~/static/icons/close-24px.svg?inline"
export default {
components: {
closeIcon,
},
data() {
return {
fb,

View File

@@ -23,7 +23,7 @@
</div>
<div>
<button class="icon" @click="removeRequest" v-close-popover>
<i class="material-icons">delete</i>
<deleteIcon class="material-icons" />
<span>{{ $t("delete") }}</span>
</button>
</div>
@@ -47,8 +47,10 @@ ul li {
<script>
import { fb } from "~/helpers/fb"
import deleteIcon from "~/static/icons/delete-24px.svg?inline"
export default {
components: { deleteIcon },
props: {
request: Object,
collectionIndex: Number,
@@ -68,13 +70,13 @@ export default {
this.$store.commit("postwoman/selectRequest", { request: this.request })
},
removeRequest() {
if (!confirm( this.$t("are_you_sure_remove_request"))) return
if (!confirm(this.$t("are_you_sure_remove_request"))) return
this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex,
requestIndex: this.requestIndex,
})
this.$toast.error(this.$t("deleted"), {
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()

View File

@@ -7,7 +7,7 @@
<h3 class="title">{{ $t("save_request_as") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
<closeIcon class="material-icons" />
</button>
</div>
</div>
@@ -79,8 +79,12 @@
<script>
import { fb } from "~/helpers/fb"
import closeIcon from "~/static/icons/close-24px.svg?inline"
export default {
components: {
closeIcon,
},
props: {
show: Boolean,
editingRequest: Object,