Skip to content

Commit 2c653fe

Browse files
nfebenfebe
committed
WIP: New UI global search
Resolves: #39162 Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
1 parent 356c221 commit 2c653fe

7 files changed

Lines changed: 417 additions & 0 deletions

File tree

‎core/src/components/GlobalSearch/SearchResultItem.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!--
2+
- @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
3+
-
4+
- @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
5+
-
6+
- @license GNU AGPL version 3 or any later version
7+
-
8+
- This program is free software: you can redistribute it and/or modify
9+
- it under the terms of the GNU Affero General Public License as
10+
- published by the Free Software Foundation, either version 3 of the
11+
- License, or (at your option) any later version.
12+
-
13+
- This program is distributed in the hope that it will be useful,
14+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
- GNU Affero General Public License for more details.
17+
-
18+
- You should have received a copy of the GNU Affero General Public License
19+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
-
21+
-->
22+
<template>
23+
<div class="result-item">
24+
<slot name="icon"></slot>
25+
<div class="details">
26+
<span>Result Title</span>
27+
<small>More details about result</small>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script>
33+
34+
export default {
35+
name: 'SearchResultItem',
36+
components: {
37+
},
38+
39+
data() {
40+
return {
41+
}
42+
},
43+
44+
methods: {
45+
46+
},
47+
}
48+
</script>
49+
50+
<style lang="scss" scoped>
51+
.result-item {
52+
display: flex;
53+
padding: 5px; /* Add padding for the border effect */
54+
border: 1px solid #f0f0f0; /* Faint border */
55+
border-radius: 10px;
56+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* Light shadow */
57+
transition: background-color 0.3s ease; /* Smooth hover transition */
58+
59+
& .details {
60+
display: flex;
61+
flex-direction: column;
62+
}
63+
64+
&:hover {
65+
background-color: var(--color-placeholder-light);
66+
}
67+
}
68+
</style>

‎core/src/global-search.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
3+
*
4+
* @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
5+
*
6+
* @license AGPL-3.0-or-later
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*
21+
*/
22+
23+
import { getLoggerBuilder } from '@nextcloud/logger'
24+
import { getRequestToken } from '@nextcloud/auth'
25+
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
26+
import Vue from 'vue'
27+
28+
import GlobalSearch from './views/GlobalSearch.vue'
29+
30+
// eslint-disable-next-line camelcase
31+
__webpack_nonce__ = btoa(getRequestToken())
32+
33+
const logger = getLoggerBuilder()
34+
.setApp('global-search')
35+
.detectUser()
36+
.build()
37+
38+
Vue.mixin({
39+
data() {
40+
return {
41+
logger,
42+
}
43+
},
44+
methods: {
45+
t,
46+
n,
47+
},
48+
})
49+
50+
export default new Vue({
51+
el: '#global-search',
52+
// eslint-disable-next-line vue/match-component-file-name
53+
name: 'GlobalSearchRoot',
54+
render: h => h(GlobalSearch),
55+
})

‎core/src/views/GlobalSearch.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!--
2+
- @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
3+
-
4+
- @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
5+
-
6+
- @license GNU AGPL version 3 or any later version
7+
-
8+
- This program is free software: you can redistribute it and/or modify
9+
- it under the terms of the GNU Affero General Public License as
10+
- published by the Free Software Foundation, either version 3 of the
11+
- License, or (at your option) any later version.
12+
-
13+
- This program is distributed in the hope that it will be useful,
14+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
- GNU Affero General Public License for more details.
17+
-
18+
- You should have received a copy of the GNU Affero General Public License
19+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
-
21+
-->
22+
<template>
23+
<div>
24+
<NcButton aria-label="Global search" @click="toggleGlobalSearch">
25+
<template #icon>
26+
<Magnify class="unified-search__trigger" :size="22" />
27+
</template>
28+
</NcButton>
29+
<GlobalSearchModal :isVisible="showGlobalSearch" />
30+
</div>
31+
</template>
32+
33+
<script>
34+
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
35+
import Magnify from 'vue-material-design-icons/Magnify.vue'
36+
import GlobalSearchModal from './GlobalSearchModal.vue';
37+
38+
export default {
39+
name: 'GlobalSearch',
40+
components: {
41+
NcButton,
42+
Magnify,
43+
GlobalSearchModal,
44+
},
45+
data() {
46+
return {
47+
showGlobalSearch: false,
48+
};
49+
},
50+
mounted() {
51+
console.debug("Global search initialized!")
52+
},
53+
methods: {
54+
toggleGlobalSearch() {
55+
this.showGlobalSearch = !this.showGlobalSearch
56+
}
57+
}
58+
};
59+
</script>
60+
61+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)