blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-18 23:42:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

provide/inject editModeIsActive from section.js -> currently used in bookmark widget to move redundant config modal into actual widget when said mode is on;

Browse Source
This commit is contained in:
Johann Hoffmann
2024-11-19 13:35:06 +01:00
parent 3cb9e5b4f8
commit f82c669475
2 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Dashboard/Section.js
+11 -1
View File
@@ -32,7 +32,17 @@ export default {
editMode: this.adminMode
}
},
provide() {
return {
editModeIsActive: Vue.computed(() =>
this.editModeIsActive
),
}
},
computed: {
editModeIsActive() {
return this.editMode && !this.configOpened
},
getSectionStyle() {
return 'margin-bottom: 8px;';
},
@@ -187,7 +197,7 @@ export default {
<span >{{$p.t('ui/section' + name)}}</span>
<button style="margin-left: 8px;" class="btn" @click="editMode = !editMode"><i class="fa-solid fa-gear"></i></button>
</h3>
<drop-grid v-model:cols="gridWidth" :items="items" :placeholders="items_placeholders" :active="editMode && !configOpened" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
<drop-grid v-model:cols="gridWidth" :items="items" :placeholders="items_placeholders" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
<template #default="item" #default>
<dashboard-item v-if="!item.placeholder"
public/js/components/DashboardWidget/Url.js
+32 -30
View File
@@ -1,7 +1,14 @@
import AbstractWidget from './Abstract';
export default {
name: "WidgetsUrl",
name: "WidgetsUrl",
mixins: [AbstractWidget],
inject: {
editModeIsActive: {
type: Boolean,
default: false
}
},
data: () => ({
title_input: "",
url_input: "",
@@ -10,7 +17,7 @@ export default {
invalidTitel:false,
}
}),
mixins: [AbstractWidget],
computed: {
tagName() {
return this.config.tag !== undefined && this.config.tag.length > 0
@@ -97,16 +104,31 @@ export default {
},
created()
{
this.$emit('setConfig', true);
//
// this.$emit('setConfig', true); -> use this to enable widget config mode if needed
},
template: /*html*/ `
<div class="widgets-url w-100 h-100">
<div v-if="configMode">
<div class="mb-3">
<header><b>{{$p.t('bookmark','newLink')}}</b></header><br>
<div>
<div class="form-group">
<div class="d-flex flex-column justify-content-between">
<!-- todo: widgetTag ?? -->
<template v-if="shared">
<header><b>{{ tagName }}</b></header>
<template v-if="!emptyBookmarks">
<div v-for="link in shared" :key="link.id" class="d-flex mt-2">
<a target="_blank" :href="link.url">
<i class="fa fa-solid fa-arrow-up-right-from-square"></i>
{{ link.title }}
</a>
<a class="ms-auto" href="#" @click.prevent="removeLink(link.bookmark_id)" v-show="configMode || editModeIsActive">
<i class="fa fa-regular fa-trash-can" style="color: #e01b24;"></i>
</a>
</div>
</template>
<div v-else class="d-flex mt-2">
<span>{{$p.t('bookmark','emptyBookmarks')}}</span>
</div>
<div v-if="editModeIsActive " class="mt-2">
<div class="form-group">
<input maxlength="255" required class="form-control form-control-sm" :class="{'is-invalid':validation.invalidTitel}" placeholder="Titel" type="text" v-model="title_input" name="title" >
<!-- validation html for titel -->
<div class="invalid-feedback">
@@ -123,27 +145,7 @@ export default {
</div>
<button class="btn btn-outline-secondary btn-sm w-100 mt-2" @click="addLink" type="button">{{$p.t('bookmark','saveLink')}}</button>
</div>
</div>
</div>
<div class="d-flex flex-column justify-content-between">
<!-- todo: widgetTag ?? -->
<template v-if="shared">
<header><b>{{ tagName }}</b></header>
<template v-if="!emptyBookmarks">
<div v-for="link in shared" :key="link.id" class="d-flex mt-2">
<a target="_blank" :href="link.url">
<i class="fa fa-solid fa-arrow-up-right-from-square"></i>
{{ link.title }}
</a>
<a class="ms-auto" href="#" @click.prevent="removeLink(link.bookmark_id)" v-show="configMode">
<i class="fa fa-regular fa-trash-can" style="color: #e01b24;"></i>
</a>
</div>
</template>
<div v-else class="d-flex mt-2">
<span>{{$p.t('bookmark','emptyBookmarks')}}</span>
</div>
</div>
</template>
<template v-else>
<p v-for="i in 4" class="placeholder-glow">