feat: svg icons

This commit is contained in:
liyasthomas
2021-08-28 05:47:33 +05:30
parent e397e3fb6f
commit 476bfbaef0
149 changed files with 476 additions and 392 deletions

View File

@@ -5,9 +5,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -28,7 +30,7 @@
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import.title')"
icon="radio_button_unchecked"
svg="circle"
color="green"
@click.native="$emit('select-collection')"
/>
@@ -36,14 +38,14 @@
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="check_circle_outline"
svg="check-circle"
color="green"
@click.native="$emit('unselect-collection')"
/>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="
@@ -66,12 +68,12 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', {
@@ -83,7 +85,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-collection')
@@ -92,7 +94,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -206,9 +208,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

View File

@@ -5,9 +5,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -29,7 +31,7 @@
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -47,12 +49,12 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', { folder, path: folderPath })
@@ -61,7 +63,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-folder', {
@@ -75,7 +77,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -189,9 +191,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

View File

@@ -14,13 +14,12 @@
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
<i
<SmartIcon
v-if="isSelected"
class="material-icons"
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
>
check_circle_outline
</i>
name="check-circle"
/>
<span v-else>
{{ request.method }}
</span>
@@ -52,7 +51,7 @@
<ButtonSecondary
v-if="!saveRequest && !doc"
v-tippy="{ theme: 'tooltip' }"
icon="replay"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}"
@@ -70,11 +69,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-request', {
@@ -88,7 +87,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="