mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-04 10:04:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace all material-icons with material-symbols

Browse source
This commit is contained in:
Nicholas Wallace 2025-03-30 23:26:14 -07:00
parent 6e0f67b19c
commit 8cf757c080
62 changed files with 218 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/ui/Dropdown.vue
View file

@ -6,7 +6,7 @@
<span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText || placeholder || '' }}</span>
</span>
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span class="material-icons">expand_more</span>
<span class="material-symbols">arrow_drop_down</span>
</span>
</button>
@ -86,4 +86,4 @@ export default {
},
mounted() {}
}
</script>
</script>

6
components/ui/DropdownMenu.vue
View file

@ -9,14 +9,14 @@
<nuxt-link :key="item.value" v-if="item.to" :to="item.to">
<li :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
<div class="flex items-center px-2">
<span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
<span v-if="item.icon" class="material-symbols text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
<span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
</div>
</li>
</nuxt-link>
<li v-else :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
<div class="flex items-center px-2">
<span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
<span v-if="item.icon" class="material-symbols text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
<span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
</div>
</li>
@ -102,4 +102,4 @@ export default {
}
}
}
</script>
</script>

2
components/ui/IconBtn.vue
View file

@ -5,7 +5,7 @@
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</div>
<span v-else :class="outlined ? 'material-icons-outlined' : 'material-icons'" :style="{ fontSize }">{{ icon }}</span>
<span v-else class="material-symbols" :class="{ fill: !outlined }" :style="{ fontSize }">{{ icon }}</span>
</button>
</template>

4
components/ui/Menu.vue
View file

@ -5,7 +5,7 @@
<span class="block truncate">{{ label }}</span>
</span>
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span class="material-icons text-fg">person</span>
<span class="material-symbols text-fg">person</span>
</span>
</button>
@ -58,4 +58,4 @@ export default {
},
mounted() {}
}
</script>
</script>

8
components/ui/MultiSelect.vue
View file

@ -6,8 +6,8 @@
<div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
<div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
<div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg bg-opacity-75 flex items-center justify-end opacity-0 hover:opacity-100">
<span v-if="showEdit" class="material-icons text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
<span class="material-icons text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
<span v-if="showEdit" class="material-symbols text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
<span class="material-symbols text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
</div>
{{ item }}
</div>
@ -22,7 +22,7 @@
<span class="font-normal ml-3 block truncate">{{ item }}</span>
</div>
<span v-if="selected.includes(item)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
<span class="material-icons text-xl">checkmark</span>
<span class="material-symbols text-xl">checkmark</span>
</span>
</li>
</template>
@ -258,4 +258,4 @@ input:read-only {
color: #aaa;
background-color: #444;
}
</style>
</style>

8
components/ui/TextInput.vue
View file

@ -2,13 +2,13 @@
<div class="relative">
<input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" :readonly="readonly" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none bg-primary disabled:text-fg-muted" :class="inputClass" @keyup="keyup" />
<div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
<span class="material-icons text-lg">{{ prependIcon }}</span>
<span class="material-symbols text-lg">{{ prependIcon }}</span>
</div>
<div v-if="clearable && input" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center" @click.stop="clear">
<span class="material-icons text-lg">close</span>
<span class="material-symbols text-lg">close</span>
</div>
<div v-else-if="!clearable && appendIcon" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
<span class="material-icons text-lg">{{ appendIcon }}</span>
<span class="material-symbols text-lg">{{ appendIcon }}</span>
</div>
</div>
</template>
@ -91,4 +91,4 @@ input[type='time']::-webkit-calendar-picker-indicator {
html[data-theme='light'] input[type='time']::-webkit-calendar-picker-indicator {
filter: unset;
}
</style>
</style>