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

changes the layout/buttons of the searchbarsettings, adds responsive searchbar in the header for mobile views

Browse Source
This commit is contained in:
SimonGschnell
2024-06-28 14:34:41 +02:00
parent 77cd3bb02d
commit 3e3f005525
7 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/system/logs/testSearch.php
+1 -1
View File
@@ -15,7 +15,7 @@
),
'customCSSs' => array(
'public/css/components/verticalsplit.css',
'public/css/components/searchbar.css',
'public/css/components/searchbar/searchbar.css',
'public/css/components/primevue.css',
),
'customJSModules' => array('public/js/apps/TestSearch.js')
application/views/templates/CISHTML-Header.php
+2 -1
View File
@@ -31,6 +31,7 @@ if (!isset($menu)) {
<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<fhc-searchbar id="nav-search" class="px-2 d-lg-none fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
<a id="nav-logo" href="<?= site_url(''); ?>">
<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
</a>
@@ -41,7 +42,7 @@ if (!isset($menu)) {
</button>
</div>
<div class="offcanvas-body p-0">
<fhc-searchbar id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
<fhc-searchbar id="nav-search" class="d-none d-lg-block fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
<img src="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" class="avatar rounded-circle"/>
</button>
public/css/Cis4/Cis.css
+1 -1
View File
@@ -1,5 +1,5 @@
/* basic */
@import '../components/searchbar.css';
@import '../components/searchbar/searchbar.css';
html {
font-size: 0.875em;
}
public/css/components/searchbar.css → public/css/components/searchbar/searchbar.css
+16 -4
View File
@@ -3,12 +3,17 @@
Author : bambi
*/
@import url(./switches.css);
#search-filter{
border: 1px solid #ced4da;
}
.searchbar_settings {
position: absolute;
z-index: 9999;
background-color: #fff;
border: 2px solid #666;
padding: 1rem;
background-color: #343a40;
}
.searchbar_results {
@@ -92,4 +97,11 @@
.searchbar_inline_ul li {
list-style: none;
}
}
.non-selectable {
user-select: none;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
}
public/css/components/searchbar/switches.css
+23
View File
@@ -0,0 +1,23 @@
.fhc-switches:checked {
background-color: white !important;
border-color: white !important;
background-position: right center !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e") !important;
}
.fhc-switches {
background-color: var(--bs-gray-600) !important;
border-color: var(--bs-gray-600) !important;
background-position: left center !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238e99a3'/%3e%3c/svg%3e") !important;
}
.fhc-switches:focus {
box-shadow: 0 0 0 .25rem rgba(108, 117, 125,.25);
}
/*.form-switch .form-check-input:checked {
rgb(52, 58, 64)*/
public/js/components/Cis/Menu.js
+1
View File
@@ -28,6 +28,7 @@ export default {
<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a id="nav-logo" :href="rootUrl">
<img :src="logoUrl" alt="Logo">
</a>
public/js/components/searchbar/searchbar.js
+25 -24
View File
@@ -26,14 +26,14 @@ export default {
employee: employee,
organisationunit: organisationunit
},
template: `
template: /*html*/`
<form ref="searchform" class="d-flex me-3" action="javascript:void(0);"
@focusin="this.searchfocusin" @focusout="this.searchfocusout">
<div class="input-group me-2 bg-white">
<div class="h-100 input-group me-2 bg-white">
<input ref="searchbox" @keyup="this.search" @focus="this.showsearchresult"
v-model="this.searchsettings.searchstr" class="form-control"
type="search" placeholder="Search" aria-label="Search">
<button ref="settingsbutton" @click="this.togglesettings" class="btn btn-outline-secondary" type="button" id="search-filter"><i class="fas fa-cog"></i></button>
type="search" :placeholder="'Search: '+ searchsettings.types.join(' / ')" aria-label="Search">
<button data-bs-toggle="collapse" data-bs-target="#searchSettings" aria-expanded="false" aria-controls="searchSettings" ref="settingsbutton" class="btn btn-outline-secondary" type="button" id="search-filter"><i class="fas fa-cog"></i></button>
</div>
<div v-show="this.showresult" ref="result"
@@ -51,24 +51,37 @@ export default {
<div v-else="">Unbekannter Ergebnistyp: '{{ res.type }}'.</div>
</template>
</div>
<div v-show="this.showsettings" ref="settings"
class="searchbar_settings" tabindex="-1">
<div class="btn-group" v-if="this.searchoptions.types.length > 0">
<template v-for="(type, index) in this.searchoptions.types" :key="type">
<input type="checkbox" class="btn-check" :id="this.$.uid + 'search_type_' + index" :value="type" v-model="this.searchsettings.types"/>
<label class="btn btn-outline-secondary" :for="this.$.uid + 'search_type_' + index">{{ type }}</label>
<div @[\`show.bs.collapse\`]="calcSearchSettingsExtent" class="collapse" id="searchSettings" ref="settings"
class="searchbar_settings text-white" tabindex="-1">
<div class="d-flex flex-column m-3" v-if="this.searchoptions.types.length > 0">
<span class="fw-light mb-2">Suche filtern nach:</span>
<template v-for="(type, index) in this.searchoptions.types" :key="type">
<div class="form-check form-switch">
<input class="fhc-switches form-check-input" type="checkbox" role="switch" :id="this.$.uid + 'search_type_' + index" :value="type" v-model="this.searchsettings.types" />
<label class="ps-2 form-check-label non-selectable" :for="this.$.uid + 'search_type_' + index">{{ type }}</label>
</div>
</template>
</div>
<div class="mb-2"></div>
<button ref="settingsrefreshsearch" @click="this.refreshsearch" class="btn btn-primary" type="button">Übernehmen</button>
</div>
</form>
`,
watch:{
'searchsettings.types'(newValue){
// execute search with new searchsettings filters
this.search();
},
},
beforeMount: function() {
this.updateSearchOptions();
},
methods: {
calcSearchSettingsExtent: function(){
this.$refs.settings.style.top = Math.floor(this.$refs.settingsbutton.offsetHeight ) + 'px';
this.$refs.settings.style.right = 0;
},
updateSearchOptions: function() {
this.searchsettings.types = [];
for( const idx in this.searchoptions.types ) {
@@ -123,18 +136,6 @@ export default {
this.search();
this.togglesettings();
},
calcSearchSettingsExtent: function() {
var rect = this.$refs.settingsbutton.getBoundingClientRect();
//console.log(window.innerWidth + ' ' + window.innerHeight + ' ' + JSON.stringify(rect));
this.$refs.settings.style.top = Math.floor(rect.bottom + 3) + 'px';
this.$refs.settings.style.right = Math.floor(window.innerWidth - rect.right) + 'px';
this.$refs.settings.style.width = Math.floor(window.innerWidth * 0.5) + 'px';
//this.$refs.settings.style.height = Math.floor(window.innerHeight * 0.5) + 'px';
},
togglesettings: function() {
this.showsettings = !this.showsettings;
this.calcSearchSettingsExtent();
},
hideresult: function() {
this.showresult = false;
window.removeEventListener('resize', this.calcSearchResultExtent);