restyled model entry

This commit is contained in:
AndzejsP
2023-05-11 13:07:49 +03:00
parent f6ece2a0f1
commit bc3f98fb50
2 changed files with 61 additions and 57 deletions

View File

@ -1,11 +1,14 @@
<template>
<div class="flex items-center space-x-4 py-4">
<div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg">
<div class="flex-shrink-0">
<i :class="`fas ${icon} text-xl`"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-lg">{{ title }}</h3>
<p class="text-gray-600">{{ description }}</p>
<p class="opacity-80">{{ description }}</p>
</div>
<div class="flex-shrink-0">
<button
@ -16,6 +19,7 @@
{{ isInstalled ? 'Uninstall' : 'Install' }}
</button>
</div>
</div>
</template>

View File

@ -1,11 +1,11 @@
<template>
<div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-1 pt-0 ">
<div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-10 pt-0 ">
<!-- CONTROL PANEL -->
<div class="flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone shadow-lg">
<div class="sticky top-0 z-10 flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone shadow-lg">
<!-- SAVE CONFIG -->
<div v-if="showConfirmation" class="flex gap-3 flex-1 items-center duration-75">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel"
type="button" @click.stop="showConfirmation = false">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel" type="button"
@click.stop="showConfirmation = false">
<i data-feather="x"></i>
</button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Confirm save changes"
@ -63,17 +63,15 @@
</select>
</div>
<div class="space-y-4">
<model-entry
v-for="(model, index) in models"
:key="index"
:title="model.title"
:icon="model.icon"
:path="model.path"
:description="model.description"
:is-installed="model.isInstalled"
:on-toggle-install="toggleInstall"
/>
<div v-if="models.length > 0" class="my-2">
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Install more models:
</label>
<div class="overflow-y-auto max-h-96 no-scrollbar p-2">
<model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon"
:path="model.path" :description="model.description" :is-installed="model.isInstalled"
:on-toggle-install="toggleInstall" />
</div>
</div>
</div>
</div>
@ -99,7 +97,8 @@
<select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option v-for="item in persLangArr" :selected="item===configFile.personality_language">{{ item }}</option>
<option v-for="item in persLangArr" :selected="item === configFile.personality_language">{{ item }}
</option>
</select>
</div>
@ -110,7 +109,8 @@
<select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option v-for="item in persCatgArr" :selected="item===configFile.personality_category">{{ item }}</option>
<option v-for="item in persCatgArr" :selected="item === configFile.personality_category">{{ item }}
</option>
</select>
</div>