|
17 | 17 | <template v-if="!embedded"> |
18 | 18 | <v-text-field |
19 | 19 | :model-value="filter.q" |
| 20 | + :density="density" |
20 | 21 | hide-details |
21 | 22 | clearable |
22 | 23 | single-line |
23 | 24 | overflow |
24 | | - rounded |
| 25 | + rounded="pill" |
25 | 26 | variant="solo-filled" |
26 | | - :density="density" |
| 27 | + color="surface-variant" |
27 | 28 | validate-on="invalid-input" |
28 | 29 | autocorrect="off" |
29 | 30 | autocapitalize="none" |
30 | 31 | autocomplete="off" |
| 32 | + prepend-inner-icon="mdi-tune" |
| 33 | + :append-inner-icon="filter.latlng ? 'mdi-map-marker-off' : ''" |
31 | 34 | :placeholder="$gettext('Search')" |
32 | | - prepend-inner-icon="mdi-magnify" |
33 | | - color="surface-variant" |
34 | 35 | class="input-search background-inherit elevation-0" |
| 36 | + :class="{ 'input-search--expanded': expanded }" |
35 | 37 | @update:model-value=" |
36 | 38 | (v) => { |
37 | 39 | updateFilter({ q: v }); |
38 | 40 | } |
39 | 41 | " |
40 | 42 | @keyup.enter="() => onUpdate()" |
| 43 | + @click:prepend-inner.stop="toggleExpansionPanel" |
| 44 | + @click:append-inner.stop="clearLocation" |
41 | 45 | @click:clear=" |
42 | 46 | () => { |
43 | 47 | onUpdate({ q: '' }); |
44 | 48 | } |
45 | 49 | " |
46 | 50 | ></v-text-field> |
47 | 51 |
|
48 | | - <v-btn |
49 | | - v-if="filter.latlng" |
50 | | - icon |
51 | | - :title="$gettext('Show more')" |
52 | | - class="action-clear-location" |
53 | | - @click.stop="clearLocation()" |
54 | | - > |
55 | | - <v-icon>mdi-map-marker-off</v-icon> |
56 | | - </v-btn> |
57 | | - |
58 | | - <v-btn icon class="hidden-xs action-reload" :title="$gettext('Reload')" @click.stop="refresh()"> |
59 | | - <v-icon>mdi-refresh</v-icon> |
60 | | - </v-btn> |
61 | | - |
62 | | - <v-btn |
63 | | - v-if="settings.view === 'list'" |
64 | | - icon |
65 | | - class="action-view-mosaic" |
66 | | - :title="$gettext('Toggle View')" |
67 | | - @click.stop="setView('mosaic')" |
68 | | - > |
69 | | - <v-icon>mdi-view-comfy</v-icon> |
70 | | - </v-btn> |
71 | | - |
72 | | - <v-btn |
73 | | - v-else-if="settings.view === 'cards' && listView" |
74 | | - icon |
75 | | - class="action-view-list" |
76 | | - :title="$gettext('Toggle View')" |
77 | | - @click.stop="setView('list')" |
78 | | - > |
79 | | - <v-icon>mdi-view-list</v-icon> |
80 | | - </v-btn> |
81 | | - |
82 | | - <v-btn |
83 | | - v-else-if="settings.view === 'cards'" |
84 | | - icon |
85 | | - class="action-view-mosaic" |
| 52 | + <v-btn-toggle |
| 53 | + :model-value="settings.view" |
86 | 54 | :title="$gettext('Toggle View')" |
87 | | - @click.stop="setView('mosaic')" |
| 55 | + :density="$vuetify.display.smAndDown ? 'comfortable' : 'default'" |
| 56 | + base-color="secondary" |
| 57 | + variant="flat" |
| 58 | + rounded="pill" |
| 59 | + mandatory |
| 60 | + border |
| 61 | + group |
| 62 | + class="ms-1" |
88 | 63 | > |
89 | | - <v-icon>mdi-view-comfy</v-icon> |
90 | | - </v-btn> |
91 | | - |
92 | | - <v-btn v-else icon class="action-view-cards" :title="$gettext('Toggle View')" @click.stop="setView('cards')"> |
93 | | - <v-icon>mdi-view-column</v-icon> |
94 | | - </v-btn> |
| 64 | + <v-btn value="cards" icon="mdi-view-column" class="ps-1" @click="setView('cards')"></v-btn> |
| 65 | + <v-btn v-if="listView" value="list" icon="mdi-view-list" @click="setView('list')"></v-btn> |
| 66 | + <v-btn value="mosaic" icon="mdi-view-comfy" class="pe-1" @click="setView('mosaic')"></v-btn> |
| 67 | + </v-btn-toggle> |
95 | 68 |
|
96 | 69 | <v-btn |
97 | 70 | v-if="canDelete && context === 'archive' && config.count.archived > 0" |
98 | | - icon |
99 | | - class="action-delete-all" |
100 | 71 | :title="$gettext('Delete All')" |
101 | | - @click.stop="deleteAll()" |
| 72 | + icon="mdi-delete-sweep" |
| 73 | + class="action-delete-all ms-1" |
| 74 | + @click.stop="deleteAll" |
102 | 75 | > |
103 | | - <v-icon>mdi-delete-sweep</v-icon> |
104 | 76 | </v-btn> |
105 | 77 |
|
106 | | - <v-btn |
107 | | - v-else-if="canUpload" |
108 | | - icon |
109 | | - class="hidden-sm-and-down action-upload" |
110 | | - :title="$gettext('Upload')" |
111 | | - @click.stop="showUpload()" |
112 | | - > |
113 | | - <v-icon>mdi-cloud-upload</v-icon> |
114 | | - </v-btn> |
| 78 | + <v-menu v-if="$vuetify.display.mdAndUp" transition="slide-y-transition" open-on-click open-on-hover> |
| 79 | + <template #activator="{ props }"> |
| 80 | + <v-btn density="comfortable" icon="mdi-dots-vertical" v-bind="props" class="action-menu ms-1"></v-btn> |
| 81 | + </template> |
115 | 82 |
|
116 | | - <v-btn |
117 | | - :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" |
118 | | - :title="$gettext('Expand Search')" |
119 | | - class="action-expand" |
120 | | - :class="{ 'action-expand--active': expanded }" |
121 | | - @click.stop="toggleExpansionPanel" |
122 | | - ></v-btn> |
| 83 | + <v-list min-width="128" density="comfortable" bg-color="navigation" slim class="ra-8 opacity-95"> |
| 84 | + <v-list-item |
| 85 | + prepend-icon="mdi-refresh" |
| 86 | + :subtitle="$gettext('Refresh')" |
| 87 | + class="action-reload action-refresh" |
| 88 | + @click="refresh" |
| 89 | + ></v-list-item> |
| 90 | + <v-list-item |
| 91 | + v-if="canUpload && context !== 'archive'" |
| 92 | + :subtitle="$gettext('Upload')" |
| 93 | + prepend-icon="mdi-cloud-upload" |
| 94 | + class="action-upload" |
| 95 | + @click="showUpload" |
| 96 | + ></v-list-item> |
| 97 | + <v-list-item |
| 98 | + v-if="featSettings && isSuperAdmin" |
| 99 | + :subtitle="$gettext('Settings')" |
| 100 | + prepend-icon="mdi-film" |
| 101 | + :to="{ name: 'settings_media' }" |
| 102 | + ></v-list-item> |
| 103 | + <v-list-item |
| 104 | + :subtitle="$gettext('Get Started')" |
| 105 | + prepend-icon="mdi-book-open-page-variant" |
| 106 | + href="https://docs.photoprism.app/user-guide/first-steps/" |
| 107 | + target="_blank" |
| 108 | + class="action-docs" |
| 109 | + ></v-list-item> |
| 110 | + </v-list> |
| 111 | + </v-menu> |
123 | 112 | </template> |
124 | 113 | <template v-else> |
125 | 114 | <v-spacer></v-spacer> |
|
316 | 305 | </div> |
317 | 306 | <p-photo-delete-dialog |
318 | 307 | :visible="dialog.delete" |
319 | | - :text="$gettext('Are you sure you want to delete all archived pictures?')" |
320 | | - :action="$gettext('Delete All')" |
| 308 | + :text="$gettext(`Delete all?`)" |
| 309 | + :action="$gettext('Yes')" |
| 310 | + icon="mdi-delete-sweep-outline" |
321 | 311 | @close="dialog.delete = false" |
322 | 312 | @confirm="batchDelete" |
323 | 313 | > |
|
328 | 318 | import * as options from "options/options"; |
329 | 319 | import $api from "common/api"; |
330 | 320 | import $notify from "common/notify"; |
| 321 | +import PConfirmAction from "../confirm/action.vue"; |
331 | 322 |
|
332 | 323 | export default { |
333 | 324 | name: "PPhotoToolbar", |
| 325 | + components: { PConfirmAction }, |
334 | 326 | props: { |
335 | 327 | context: { |
336 | 328 | type: String, |
@@ -377,11 +369,13 @@ export default { |
377 | 369 | expanded: false, |
378 | 370 | experimental: this.$config.get("experimental"), |
379 | 371 | isFullScreen: !!document.fullscreenElement, |
| 372 | + isSuperAdmin: this.$session.isSuperAdmin(), |
380 | 373 | config: this.$config.values, |
381 | 374 | readonly: readonly, |
382 | 375 | canUpload: !readonly && !this.embedded && this.$config.allow("files", "upload") && features.upload, |
383 | 376 | canDelete: !readonly && !this.embedded && this.$config.allow("photos", "delete") && features.delete, |
384 | 377 | canAccessLibrary: this.$config.allow("photos", "access_library"), |
| 378 | + featSettings: features.settings, |
385 | 379 | listView: this.$config.getSettings()?.search?.listView, |
386 | 380 | all: { |
387 | 381 | countries: [{ ID: "", Name: this.$gettext("All Countries") }], |
|
0 commit comments