Skip to content

Commit d120b15

Browse files
christianlupuschristianlupus
authored
Merge pull request #1258 from MarcelRobitaille/1067-create-an-app-configuration
Create an app configuration
2 parents 0f18361 + b0dd3c6 commit d120b15

5 files changed

Lines changed: 128 additions & 77 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
- Allow import of recipes with HowToSections
3232
[#1255](https://github.com/nextcloud/cookbook/pull/1255) @christianlupus
3333

34+
### Changed
35+
- Add an app configuration (settings modal) to replace the one in the sidebar
36+
[#1258](https://github.com/nextcloud/cookbook/pull/1258) @MarcelRobitaille
37+
3438

3539
## 0.9.17 - 2022-10-31
3640

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@nextcloud/event-bus": "3.0.2",
3434
"@nextcloud/moment": "^1.1.1",
3535
"@nextcloud/router": "^2.0.0",
36-
"@nextcloud/vue": "^7.0.1",
36+
"@nextcloud/vue": "^7.1.0",
3737
"caret-pos": "2.0.0",
3838
"linkifyjs": "^4.0.0",
3939
"lozad": "^1.16.0",

‎src/components/AppMain.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
/>
1717
</NcAppContent>
1818
<dialogs-wrapper></dialogs-wrapper>
19+
<SettingsDialog />
1920
</NcContent>
2021
</template>
2122

@@ -26,13 +27,15 @@ import NcContent from "@nextcloud/vue/dist/Components/NcContent"
2627
import AppControls from "cookbook/components/AppControls/AppControls.vue"
2728
import { emit, subscribe, unsubscribe } from "@nextcloud/event-bus"
2829
import AppNavi from "./AppNavi.vue"
30+
import SettingsDialog from "./SettingsDialog.vue"
2931
3032
export default {
3133
name: "AppMain",
3234
components: {
3335
NcAppContent,
3436
AppControls,
3537
AppNavi,
38+
SettingsDialog,
3639
// eslint-disable-next-line vue/no-reserved-component-names
3740
NcContent,
3841
},

‎src/components/AppNavi.vue‎

Lines changed: 11 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -73,15 +73,18 @@
7373
</template>
7474

7575
<template slot="footer">
76-
<AppSettings
77-
:scanning-library="scanningLibrary"
78-
@reindex="reindex"
76+
<NcAppNavigationNew
77+
:text="t('cookbook', 'Cookbook settings')"
78+
:button-class="['create', 'icon-settings']"
79+
@click="handleOpenSettings"
7980
/>
8081
</template>
8182
</NcAppNavigation>
8283
</template>
8384

8485
<script>
86+
import { emit } from "@nextcloud/event-bus"
87+
8588
import NcActionInput from "@nextcloud/vue/dist/Components/NcActionInput"
8689
import NcAppNavigation from "@nextcloud/vue/dist/Components/NcAppNavigation"
8790
import NcAppNavigationItem from "@nextcloud/vue/dist/Components/NcAppNavigationItem"
@@ -96,7 +99,7 @@ import api from "cookbook/js/api-interface"
9699
import helpers from "cookbook/js/helper"
97100
import { showSimpleAlertModal } from "cookbook/js/modals"
98101
99-
import AppSettings from "./AppSettings.vue"
102+
import { SHOW_SETTINGS_EVENT } from "./SettingsDialog.vue"
100103
import AppNavigationCaption from "./AppNavigationCaption.vue"
101104
102105
export default {
@@ -107,7 +110,6 @@ export default {
107110
NcAppNavigationItem,
108111
NcAppNavigationNew,
109112
NcCounterBubble,
110-
AppSettings,
111113
AppNavigationCaption,
112114
PlusIcon,
113115
},
@@ -118,7 +120,6 @@ export default {
118120
downloading: false,
119121
isCategoryUpdating: [],
120122
loading: { categories: true },
121-
scanningLibrary: false,
122123
uncatRecipes: 0,
123124
}
124125
},
@@ -344,40 +345,6 @@ export default {
344345
}
345346
},
346347
347-
/**
348-
* Reindex all recipes
349-
*/
350-
reindex() {
351-
this.$log.debug("Calling reindex")
352-
const $this = this
353-
if (this.scanningLibrary) {
354-
// No repeat clicks until we're done
355-
return
356-
}
357-
this.scanningLibrary = true
358-
api.recipes
359-
.reindex()
360-
.then(() => {
361-
$this.scanningLibrary = false
362-
// eslint-disable-next-line no-console
363-
console.log("Library reindexing complete")
364-
if (
365-
["index", "search"].indexOf(this.$store.state.page) > -1
366-
) {
367-
// This refreshes the current router view in case items in it changed during reindex
368-
$this.$router.go()
369-
} else {
370-
this.$log.debug("Calling getCategories from reindex")
371-
$this.getCategories()
372-
}
373-
})
374-
.catch(() => {
375-
$this.scanningLibrary = false
376-
// eslint-disable-next-line no-console
377-
console.log("Library reindexing failed!")
378-
})
379-
},
380-
381348
/**
382349
* Set loading recipe index to show the loading icon
383350
*/
@@ -393,6 +360,10 @@ export default {
393360
isVisible: !this.$store.state.appNavigation.visible,
394361
})
395362
},
363+
364+
handleOpenSettings() {
365+
emit(SHOW_SETTINGS_EVENT)
366+
},
396367
},
397368
}
398369
</script>

src/components/AppSettings.vue renamed to src/components/SettingsDialog.vue

Lines changed: 109 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
11
<template>
2-
<NcAppNavigationSettings :open="true">
3-
<div id="app-settings">
2+
<NcAppSettingsDialog
3+
:open.sync="isOpen"
4+
:title="t('cookbook', 'Cookbook settings')"
5+
:show-navigation="true"
6+
first-selected-section="keyboard shortcuts"
7+
>
8+
<NcAppSettingsSection
9+
id="settings-recipe-folder"
10+
:title="t('cookbook', 'Recipe folder')"
11+
class="app-settings-section"
12+
>
413
<fieldset>
514
<ul>
615
<li>
7-
<NcActionButton
8-
class="button"
9-
:icon="
10-
scanningLibrary
11-
? 'icon-loading-small'
12-
: 'icon-history'
13-
"
14-
:title="t('cookbook', 'Rescan library')"
15-
@click="$emit('reindex')"
16-
/>
16+
<NcButton @click="reindex">
17+
<template #icon>
18+
<LoadingIcon v-if="scanningLibrary" />
19+
<ReloadIcon v-else />
20+
</template>
21+
{{ t("cookbook", "Rescan library") }}
22+
</NcButton>
1723
</li>
1824
<li>
1925
<label class="settings-input">{{
@@ -37,6 +43,16 @@
3743
placeholder="0"
3844
/>
3945
</li>
46+
</ul>
47+
</fieldset>
48+
</NcAppSettingsSection>
49+
<NcAppSettingsSection
50+
id="settings-recipe-display"
51+
:title="t('cookbook', 'Recipe display settings')"
52+
class="app-settings-section"
53+
>
54+
<fieldset>
55+
<ul>
4056
<li>
4157
<input
4258
id="recipe-print-image"
@@ -64,36 +80,42 @@
6480
</li>
6581
</ul>
6682
</fieldset>
67-
</div>
68-
</NcAppNavigationSettings>
83+
</NcAppSettingsSection>
84+
</NcAppSettingsDialog>
6985
</template>
7086

7187
<script>
72-
import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton"
73-
import NcAppNavigationSettings from "@nextcloud/vue/dist/Components/NcAppNavigationSettings"
88+
import { subscribe, unsubscribe } from "@nextcloud/event-bus"
89+
90+
import NcAppSettingsDialog from "@nextcloud/vue/dist/Components/NcAppSettingsDialog"
91+
import NcAppSettingsSection from "@nextcloud/vue/dist/Components/NcAppSettingsSection"
92+
import NcButton from "@nextcloud/vue/dist/Components/NcButton"
93+
import LoadingIcon from "icons/Loading.vue"
94+
import ReloadIcon from "icons/Cached.vue"
7495
7596
import api from "cookbook/js/api-interface"
7697
import { showSimpleAlertModal } from "cookbook/js/modals"
7798
99+
export const SHOW_SETTINGS_EVENT = "show-settings"
100+
78101
export default {
79-
name: "AppSettings",
102+
name: "SettingsDialog",
80103
components: {
81-
NcActionButton,
82-
NcAppNavigationSettings,
83-
},
84-
props: {
85-
scanningLibrary: {
86-
type: Boolean,
87-
default: false,
88-
},
104+
NcButton,
105+
NcAppSettingsDialog,
106+
NcAppSettingsSection,
107+
LoadingIcon,
108+
ReloadIcon,
89109
},
90110
data() {
91111
return {
112+
isOpen: false,
92113
printImage: false,
93114
recipeFolder: "",
94115
resetPrintImage: true,
95116
showTagCloudInRecipeList: true,
96117
resetTagCloud: true,
118+
scanningLibrary: false,
97119
// By setting the reset value initially to true, it will skip one watch event
98120
// (the one when config is loaded at page load)
99121
resetInterval: true,
@@ -150,8 +172,14 @@ export default {
150172
},
151173
mounted() {
152174
this.setup()
175+
176+
subscribe(SHOW_SETTINGS_EVENT, this.handleShowSettings)
153177
},
154178
methods: {
179+
handleShowSettings() {
180+
this.isOpen = true
181+
},
182+
155183
/**
156184
* Select a recipe folder using the Nextcloud file picker
157185
*/
@@ -209,27 +237,72 @@ export default {
209237
)
210238
}
211239
},
240+
241+
/**
242+
* Reindex all recipes
243+
*/
244+
reindex() {
245+
const $this = this
246+
if (this.scanningLibrary) {
247+
// No repeat clicks until we're done
248+
return
249+
}
250+
this.scanningLibrary = true
251+
api.recipes
252+
.reindex()
253+
.then(() => {
254+
$this.scanningLibrary = false
255+
// eslint-disable-next-line no-console
256+
console.log("Library reindexing complete")
257+
if (
258+
["index", "search"].indexOf(this.$store.state.page) > -1
259+
) {
260+
// This refreshes the current router view in case items in it changed during reindex
261+
$this.$router.go()
262+
} else {
263+
$this.getCategories()
264+
}
265+
})
266+
.catch(() => {
267+
$this.scanningLibrary = false
268+
// eslint-disable-next-line no-console
269+
console.log("Library reindexing failed!")
270+
})
271+
},
272+
273+
beforeDestroy() {
274+
unsubscribe(SHOW_SETTINGS_EVENT, this.handleShowSettings)
275+
},
212276
},
213277
}
214278
</script>
215279

280+
<style scoped>
281+
/* TODO: Use @nextcloud/vue LoadingIcon once we update to 7.0.0 and we won't
282+
* have to do this */
283+
.material-design-icon.loading-icon:deep(svg) {
284+
animation: rotate var(--animation-duration, 0.8s) linear infinite;
285+
color: var(--color-loading-dark);
286+
}
287+
</style>
288+
216289
<style>
217290
#app-settings input[type="text"],
218291
#app-settings input[type="number"],
219-
#app-settings .button {
292+
#app-settings .button.disable {
220293
display: block;
221294
width: 100%;
222295
}
223296
224-
#app-settings .button {
225-
z-index: 2;
226-
height: 44px;
227-
padding: 0;
228-
border-radius: var(--border-radius);
229-
}
297+
/* #app-settings .button { */
298+
/* z-index: 2; */
299+
/* height: 44px; */
300+
/* padding: 0; */
301+
/* border-radius: var(--border-radius); */
302+
/* } */
230303
231-
#app-settings .button p {
232-
margin: auto;
233-
font-size: 13px;
234-
}
304+
/* #app-settings .button p { */
305+
/* margin: auto; */
306+
/* font-size: 13px; */
307+
/* } */
235308
</style>

0 commit comments

Comments
 (0)