[core] Revert usage of material icons and use mdi-v5

* Fixed usage of old material-icons
* Added icons section to readme
This commit is contained in:
Ferdinand Thiessen 2021-04-02 22:31:07 +02:00
parent 7fb689b31f
commit 66dd33dc25
3 changed files with 51 additions and 40 deletions

View File

@ -1,17 +1,52 @@
# Flaschengeist (flaschengeist-frontend) # Flaschengeist (frontend)
Modular student club administration system. Modular student club administration system, licensed under the MIT license.
Licensed under the MIT license.
## Install the dependencies ## Installation
### Install the dependencies
```bash ```bash
yarn install yarn install
``` ```
## Plugins ### Configure Plugins
### Build a Plugin You can activate and deactive Plugins in `src/boot/plugins.ts`.
You have to set the name of the Plugin into `config.loadModules`.
### Build the application
```bash
yarn quasar build
```
## Development
### Icons used
We are using the `mdi-v5` icon set, so feel free to use any icon from it.
A list can be found [here](https://materialdesignicons.com/)
### Commands useful for development
#### Start the app in development mode
Provides hot-code reloading, error reporting, etc.
```bash
yarn quasar dev
```
#### File linting
```bash
yarn run lint
```
### Plugins
#### Build a Plugin
A Flaschengeist-Frontend-Plugin should be placed in `src/plugins`. A Flaschengeist-Frontend-Plugin should be placed in `src/plugins`.
It needs a `plugin.ts` File which exports a plugin with the following interface: It needs a `plugin.ts` File which exports a plugin with the following interface:
@ -20,32 +55,8 @@ It needs a `plugin.ts` File which exports a plugin with the following interface:
name: string; name: string;
mainRoutes?: PluginRouteConfig[]; mainRoutes?: PluginRouteConfig[];
outRoutes?: PluginRouteConfig[]; outRoutes?: PluginRouteConfig[];
store?: Map<string, Module<any, StateInterface>>;
requiredModules: string[]; requiredModules: string[];
version: string; version: string;
``` ```
You have to import `FG_Plugin` from `plugins.d.ts`. You have to import `FG_Plugin` from `plugins.d.ts`.
### Configure Plugin
You can activate and deactive Plugins in `src/boot/plugins.ts`. You have to set the name of the Plugin into `config.loadModules`.
The order of the plugins is importend!
### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash
yarn quasar dev
```
### Lint the files
```bash
yarn run lint
```
### Build the app for production
```bash
yarn quasar build
```

View File

@ -37,16 +37,16 @@ module.exports = configure(function (/* ctx */) {
// https://github.com/quasarframework/quasar/tree/dev/extras // https://github.com/quasarframework/quasar/tree/dev/extras
extras: [ extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v5',
// 'eva-icons', // 'eva-icons',
// 'themify', // 'fontawesome-v5',
// 'ionicons-v4',
// 'line-awesome', // 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! // 'material-icons',
'mdi-v5',
// 'themify',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it 'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
], ],
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
@ -74,7 +74,7 @@ module.exports = configure(function (/* ctx */) {
chainWebpack (chain) { chainWebpack (chain) {
chain.plugin('eslint-webpack-plugin') chain.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ .use(ESLintPlugin, [{
extensions: [ 'js', 'vue' ], extensions: [ 'ts', 'js', 'vue' ],
exclude: 'node_modules' exclude: 'node_modules'
}]) }])
}, },
@ -90,7 +90,7 @@ module.exports = configure(function (/* ctx */) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: { framework: {
iconSet: 'material-icons', // Quasar icon set iconSet: 'mdi-v5', // Quasar icon set
lang: 'de', // Quasar language pack lang: 'de', // Quasar language pack
config: { config: {
dark: 'auto', dark: 'auto',

View File

@ -21,7 +21,7 @@
</q-toolbar-title> </q-toolbar-title>
<!-- Hier kommen die Shortlinks hin --> <!-- Hier kommen die Shortlinks hin -->
<q-btn icon="message" flat dense <q-btn icon="mdi-message-bulleted" flat dense
><q-badge color="negative" floating>{{ notifications.length }}</q-badge> ><q-badge color="negative" floating>{{ notifications.length }}</q-badge>
<q-menu style="max-height: 400px; overflow: auto"> <q-menu style="max-height: 400px; overflow: auto">
<q-btn <q-btn
@ -81,7 +81,7 @@
round round
unelevated unelevated
color="secondary" color="secondary"
icon="chevron_left" icon="mdi-menu-left"
@click="leftDrawerMini = true" @click="leftDrawerMini = true"
/> />
</div> </div>