Standardized how we use the Message component.

This commit is contained in:
Abdulmhsen B. A. A.
2024-06-11 21:08:10 +03:00
parent 84307db783
commit c72346ea08
26 changed files with 764 additions and 899 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
<NuxtLink to="/backends">Backends</NuxtLink>
-
@@ -11,8 +11,7 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click.prevent="loadContent" :disabled="isLoading"
:class="{'is-loading':isLoading}">
<button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
@@ -25,16 +24,11 @@
</div>
<div class="column is-12" v-if="items.length < 1">
<Message message_class="has-background-info-90 has-text-dark" title="No Libraries">
<span class="icon-text" v-if="isLoading">
<span class="icon"><i class="fas fa-spinner fa-spin"></i></span>
<span>Loading libraries list. Please wait...</span>
</span>
<span class="icon-text" v-else>
<span class="icon"><i class="fas fa-info-circle"></i></span>
<span>No libraries found in the backend.</span>
</span>
</Message>
<Message message_class="has-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
message="Loading libraries list. Please wait..." v-if="isLoading"/>
<Message v-else message_class="has-background-warning-80 has-text-dark" title="Warning"
icon="fas fa-exclamation-circle"
message="WatchState was unable to get any libraries from the backend."/>
</div>
<div class="column is-6" v-for="item in items" :key="`library-${item.id}`">
@@ -82,31 +76,14 @@
</div>
<div class="column is-12">
<Message message_class="has-background-info-90 has-text-dark">
<div class="is-pulled-right">
<NuxtLink @click="show_page_tips=false" v-if="show_page_tips">
<span class="icon"><i class="fas fa-arrow-up"></i></span>
<span>Close</span>
</NuxtLink>
<NuxtLink @click="show_page_tips=true" v-else>
<span class="icon"><i class="fas fa-arrow-down"></i></span>
<span>Open</span>
</NuxtLink>
</div>
<h5 class="title is-5 is-unselectable">
<span class="icon-text">
<span class="icon"><i class="fas fa-info-circle"></i></span>
<span>Tips</span>
</span>
</h5>
<div class="content" v-if="show_page_tips">
<ul>
<li>Ignoring library will prevent any content from being added to the local database from that library
during import process, and via webhook events.
</li>
<li>Libraries that shows <code>Supported: No</code> will not be processed by the system.</li>
</ul>
</div>
<Message message_class="has-background-info-90 has-text-dark" title="Tips" icon="fas fa-info-circle"
:toggle="show_page_tips" @toggle="show_page_tips = !show_page_tips" :use-toggle="true">
<ul>
<li>Ignoring library will prevent any content from being added to the local database from the library
during import process, and webhook events handling.
</li>
<li>Libraries that shows <code>Supported: No</code> will not be processed by <code>WatchState</code>.</li>
</ul>
</Message>
</div>
</div>