Skip to content

Commit 16583f1

Browse files
cabal95cabal95
committed
- Updated the docked panel in Docked mode to go full-screen on smaller devices. Also updated parts of the Rock header to make more room for docked panels on smaller screens.
1 parent fc01f11 commit 16583f1

8 files changed

Lines changed: 220 additions & 176 deletions

File tree

‎Rock.JavaScript.Obsidian.Blocks/src/AI/chatBot.obs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
minWidth="500px"
1717
maxWidth="50%"
1818
mode="push">
19+
<template #header>
20+
<div class="chat-bot-header">
21+
<span class="chat-bot-close-panel" @click="isDockedChatOpen = false">
22+
<i class="ti ti-x"></i>
23+
</span>
24+
</div>
25+
</template>
26+
1927
<div ref="dockedChatContainer"
2028
class="chat-bot chat-bot-docked"
2129
style="height: 100%; display: flex;">

‎Rock.JavaScript.Obsidian.Blocks/src/Core/smartSearch.obs‎

Lines changed: 85 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,98 @@
11
<!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->
22
<template>
3-
<SearchField v-model="searchTerm" :initialSearchFilters="options?.searchFilters ?? undefined" />
3+
<div class="smartsearch searchinput">
4+
<i class="ti ti-search"></i>
5+
<ul class="nav pull-right smartsearch-type">
6+
<li class="dropdown"><a class="dropdown-toggle navbar-link" data-toggle="dropdown"><span>{{ defaultFilterLabel }}</span><b class="ti ti-caret-down-filled"></b></a>
7+
<ul class="dropdown-menu">
8+
<li v-for="(filter, index) in searchFilters" :key="filter.key ?? index" :data-key="filter.key" :data-target="filter.resultUrl"><a>{{ filter.label }}</a></li>
9+
</ul>
10+
</li>
11+
</ul>
12+
<input type="search" ref="inputElement" :id="uniqueId" v-model="internalValue" accesskey="q" class="searchinput tt-query" autocomplete="off" spellcheck="false" style="position: relative; vertical-align: top; background-color: transparent;" dir="auto">
13+
<input type="hidden" ref="hiddenFilterInput" name="searchField_hSearchFilter" id="searchField_hSearchFilter">
14+
</div>
415
</template>
516

617
<script setup lang="ts">
7-
import { ref } from "vue";
18+
import { computed, ref, watch } from "vue";
819
import { onConfigurationValuesChanged, useConfigurationValues, useReloadBlock } from "@Obsidian/Utility/block";
920
import { CustomBlockBox } from "@Obsidian/ViewModels/Blocks/customBlockBox";
1021
import { SmartSearchOptionsBag } from "@Obsidian/ViewModels/Blocks/Core/SmartSearch/smartSearchOptionsBag";
11-
import SearchField from "@Obsidian/Controls/searchField.obs";
22+
import { SearchFilterBag } from "@Obsidian/ViewModels/Blocks/Core/SmartSearch/searchFilterBag";
23+
import { useHttp } from "@Obsidian/Utility/http";
24+
import { newGuid } from "@Obsidian/Utility/guid";
1225

1326
const config = useConfigurationValues<CustomBlockBox<object, SmartSearchOptionsBag>>();
14-
const options = config.options;
15-
const searchTerm = ref("");
27+
28+
// #region Values
29+
30+
const internalValue = ref("");
31+
const http = useHttp();
32+
const uniqueId = `rock-searchField-${newGuid()}`;
33+
const inputElement = ref<HTMLInputElement>();
34+
const hiddenFilterInput = ref<HTMLInputElement>();
35+
36+
/**
37+
* The available search filters.
38+
*/
39+
const searchFilters = ref<SearchFilterBag[]>();
40+
41+
// #endregion
42+
43+
// #region Computed Values
44+
45+
/**
46+
* Gets the display label of the default search filter (e.g. "Name").
47+
*/
48+
const defaultFilterLabel = computed<string>(() => {
49+
if (!searchFilters.value || searchFilters.value.length === 0) {
50+
return "";
51+
}
52+
53+
return searchFilters.value[0].label ?? "";
54+
});
55+
56+
// #endregion
57+
58+
// #region Functions
59+
60+
/** Fetches the available search filters from the API. */
61+
async function fetchSearchFilters(): Promise<void> {
62+
const url = "/api/v2/Controls/SearchFieldGetSearchFilters";
63+
const response = await http.post<SearchFilterBag[]>(url);
64+
65+
if (response.isSuccess && response.data) {
66+
searchFilters.value = response.data;
67+
}
68+
else {
69+
console.error("Error fetching items from server", response.errorMessage);
70+
}
71+
}
72+
73+
// #endregion
74+
75+
// #region Watchers
76+
77+
watch([inputElement, hiddenFilterInput, searchFilters], () => {
78+
if (inputElement.value && hiddenFilterInput.value && searchFilters.value) {
79+
if (searchFilters.value.length > 0) {
80+
hiddenFilterInput.value.value = searchFilters.value[0].key ?? "";
81+
}
82+
83+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
84+
(window["Rock"] as any).controls.searchField.initialize({ controlId: uniqueId });
85+
}
86+
});
87+
88+
// #endregion
89+
90+
if (config.options?.searchFilters) {
91+
searchFilters.value = config.options.searchFilters;
92+
}
93+
else {
94+
fetchSearchFilters();
95+
}
1696

1797
onConfigurationValuesChanged(useReloadBlock());
1898
</script>

‎Rock.JavaScript.Obsidian/Framework/Controls/searchField.obs‎

Lines changed: 0 additions & 160 deletions
This file was deleted.

‎RockWeb/Styles/styles-v2/blocks/_blocks-ai.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -306,4 +306,37 @@
306306
}
307307
}
308308

309+
/*
310+
* When docked panel in push mode and screen width is less than 1440px
311+
* show the chat bot header so they can close the panel.
312+
*/
313+
body[data-docked-panel-mode="push"] .chat-bot-header {
314+
display: none;
315+
border-bottom: 1px solid var(--color-interface-soft);
316+
}
317+
318+
body[data-docked-panel-mode="push"] .chat-bot-header .chat-bot-close-panel {
319+
margin-left: auto;
320+
width: 56px;
321+
height: 56px;
322+
border-left: 1px solid var(--color-interface-soft);
323+
display: flex;
324+
align-items: center;
325+
justify-content: center;
326+
cursor: pointer;
327+
color: var(--color-interface-medium);
328+
}
329+
330+
body[data-docked-panel-mode="push"] .chat-bot-header .chat-bot-close-panel:hover {
331+
color: var(--color-interface-stronger);
332+
background-color: var(--color-interface-soft);
333+
transition: color 0.2s ease, background-color 0.2s ease;
334+
}
335+
336+
@media (max-width: 1439px) {
337+
body[data-docked-panel-mode="push"] .chat-bot-header {
338+
display: block;
339+
}
340+
}
341+
309342
// ================END CHAT BOT==========================

‎RockWeb/Styles/styles-v2/core.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11378,6 +11378,17 @@ body[data-docked-panel-mode=push] .docked-panel-container[data-mode=push] .docke
1137811378
box-shadow: none;
1137911379
}
1138011380

11381+
@media (max-width: 1439px) {
11382+
body[data-docked-panel-mode=push] {
11383+
padding-right: 0;
11384+
}
11385+
body[data-docked-panel-mode=push] .navbar-fixed-top {
11386+
right: 0;
11387+
}
11388+
body[data-docked-panel-mode=push] .docked-panel {
11389+
width: 100%;
11390+
}
11391+
}
1138111392
.grid-overflow {
1138211393
overflow-x: auto;
1138311394
}
@@ -20857,6 +20868,38 @@ table tbody tr td .required-indicator::after {
2085720868
border-radius: 0;
2085820869
}
2085920870

20871+
/*
20872+
* When docked panel in push mode and screen width is less than 1440px
20873+
* show the chat bot header so they can close the panel.
20874+
*/
20875+
body[data-docked-panel-mode=push] .chat-bot-header {
20876+
display: none;
20877+
border-bottom: 1px solid var(--color-interface-soft);
20878+
}
20879+
20880+
body[data-docked-panel-mode=push] .chat-bot-header .chat-bot-close-panel {
20881+
margin-left: auto;
20882+
width: 56px;
20883+
height: 56px;
20884+
border-left: 1px solid var(--color-interface-soft);
20885+
display: flex;
20886+
align-items: center;
20887+
justify-content: center;
20888+
cursor: pointer;
20889+
color: var(--color-interface-medium);
20890+
}
20891+
20892+
body[data-docked-panel-mode=push] .chat-bot-header .chat-bot-close-panel:hover {
20893+
color: var(--color-interface-stronger);
20894+
background-color: var(--color-interface-soft);
20895+
transition: color 0.2s ease, background-color 0.2s ease;
20896+
}
20897+
20898+
@media (max-width: 1439px) {
20899+
body[data-docked-panel-mode=push] .chat-bot-header {
20900+
display: block;
20901+
}
20902+
}
2086020903
.choose-experience-mode {
2086120904
display: flex;
2086220905
gap: var(--spacing-medium);

‎RockWeb/Styles/styles-v2/rock-components/_panels-extensions.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -910,4 +910,18 @@ body[data-docked-panel-mode="push"] {
910910
}
911911
}
912912

913+
@media (max-width: 1439px) {
914+
body[data-docked-panel-mode="push"] {
915+
padding-right: 0;
916+
917+
.navbar-fixed-top {
918+
right: 0;
919+
}
920+
}
921+
922+
body[data-docked-panel-mode="push"] .docked-panel {
923+
width: 100%;
924+
}
925+
}
926+
913927
// ===================== END DOCKED PANEL =====================

0 commit comments

Comments
 (0)