Skip to content

Commit

Permalink
Use modifier + f11 to hide both menu bar and app bar
Browse files Browse the repository at this point in the history 
Able to show app bar but hide menu bar via setting
  • Loading branch information
@tanchekwei @sunner
tanchekwei authored and sunner committed Mar 15, 2024
1 parent c5b6d23 commit d937e53
Show file tree
Hide file tree
Showing 8 changed files with 205 additions and 115 deletions.
253 changes: 141 additions & 112 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,118 +6,132 @@
v-model:open="isChatDrawerOpen"
@focus-textarea="focusPromptTextarea"
></ChatDrawer>
<v-main class="content">
<v-app-bar class="header-content pa-0">
<!-- Start Header -->
<div class="header-content" v-show="isSelectedResponsesEmpty">
<v-app-bar-nav-icon
:id="SHORTCUT_CHAT_DRAWER.elementId"
variant="text"
@click.stop="isChatDrawerOpen = !isChatDrawerOpen"
@shortkey="isChatDrawerOpen = !isChatDrawerOpen"
v-shortkey="SHORTCUT_CHAT_DRAWER.key"
>
</v-app-bar-nav-icon>
<img
:class="{ 'dark-png': store.state.theme === Theme.DARK }"
class="logo"
src="@/assets/logo-banner.png"
alt="ChatALL"
/>
</div>
<div
class="column-icons header-content"
v-show="isSelectedResponsesEmpty"
>
<img
v-for="columnCount in 3"
:id="`column-${columnCount}`"
:key="columnCount"
:src="getColumnImage(columnCount)"
@click="changeColumns(columnCount)"
@shortkey="changeColumns(columnCount)"
v-shortkey="[`f${columnCount}`]"
:class="{
selected: columns === columnCount,
'dark-png': store.state.theme === Theme.DARK,
}"
/>
</div>
<div
class="header-content"
style="padding-right: 16px"
v-show="isSelectedResponsesEmpty"
>
<v-icon
:id="SHORTCUT_FIND.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-magnify"
size="x-large"
@click="openFind()"
></v-icon>
<v-icon
v-shortkey="SHORTCUT_CLEAR_MESSAGES.key"
@shortkey="clearMessages"
:id="SHORTCUT_CLEAR_MESSAGES.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-broom"
size="x-large"
@click="clearMessages()"
></v-icon>
<v-icon
v-shortkey="SHORTCUT_SETTINGS.key"
@shortkey="openSettingsModal"
:id="SHORTCUT_SETTINGS.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-cog"
size="x-large"
@click="openSettingsModal()"
></v-icon>
<v-icon
v-shortkey="SHORTCUT_SHORTCUT_GUIDE.key"
@shortkey="toggleShortcutGuide"
:id="SHORTCUT_SHORTCUT_GUIDE.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-help"
size="x-large"
@click="toggleShortcutGuide()"
></v-icon>
</div>
<!-- End Header -->
<!-- Start Selected Responses -->
<div
class="header-content pr-3"
style="text-wrap: nowrap"
v-show="!isSelectedResponsesEmpty"
<v-main class="content" :class="{ paddingTopZero: !isShowAppBar }">
<v-slide-y-transition>
<v-app-bar
:id="SHORTCUT_APP_BAR.elementId"
@shortkey="
isShowAppBar = !isShowAppBar;
ipcRenderer.invoke('set-is-show-menu-bar', isShowAppBar);
"
v-shortkey="SHORTCUT_APP_BAR.key"
v-show="isShowAppBar"
:style="{
transform: isShowAppBar ? 'translateY(0)' : 'translateY(-100%)',
}"
class="header-content pa-0"
>
<v-btn icon color="primary" @click="deselectAll">
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
{{
$t("header.selectedResponsesCount", {
selectedCount: store.state.selectedResponses.length,
})
}}
</div>
<div
class="header-content overflow-auto"
v-show="!isSelectedResponsesEmpty"
>
<v-btn
v-for="action in userActions"
color="primary"
class="no-text-transform"
:text="action.name"
:key="action.index"
@click="callAction(action)"
></v-btn>
</div>
<!-- End Selected Responses -->
</v-app-bar>
<!-- Start Header -->
<div class="header-content" v-show="isSelectedResponsesEmpty">
<v-app-bar-nav-icon
:id="SHORTCUT_CHAT_DRAWER.elementId"
variant="text"
@click.stop="isChatDrawerOpen = !isChatDrawerOpen"
@shortkey="isChatDrawerOpen = !isChatDrawerOpen"
v-shortkey="SHORTCUT_CHAT_DRAWER.key"
>
</v-app-bar-nav-icon>
<img
:class="{ 'dark-png': store.state.theme === Theme.DARK }"
class="logo"
src="@/assets/logo-banner.png"
alt="ChatALL"
/>
</div>
<div
class="column-icons header-content"
v-show="isSelectedResponsesEmpty"
>
<img
v-for="columnCount in 3"
:id="`column-${columnCount}`"
:key="columnCount"
:src="getColumnImage(columnCount)"
@click="changeColumns(columnCount)"
@shortkey="changeColumns(columnCount)"
v-shortkey="[`f${columnCount}`]"
:class="{
selected: columns === columnCount,
'dark-png': store.state.theme === Theme.DARK,
}"
/>
</div>
<div
class="header-content"
style="padding-right: 16px"
v-show="isSelectedResponsesEmpty"
>
<v-icon
:id="SHORTCUT_FIND.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-magnify"
size="x-large"
@click="openFind()"
></v-icon>
<v-icon
v-shortkey="SHORTCUT_CLEAR_MESSAGES.key"
@shortkey="clearMessages"
:id="SHORTCUT_CLEAR_MESSAGES.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-broom"
size="x-large"
@click="clearMessages()"
></v-icon>
<v-icon
v-shortkey="SHORTCUT_SETTINGS.key"
@shortkey="openSettingsModal"
:id="SHORTCUT_SETTINGS.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-cog"
size="x-large"
@click="openSettingsModal()"
></v-icon>
<v-icon
v-shortkey="SHORTCUT_SHORTCUT_GUIDE.key"
@shortkey="toggleShortcutGuide"
:id="SHORTCUT_SHORTCUT_GUIDE.elementId"
class="cursor-pointer"
color="primary"
icon="mdi-help"
size="x-large"
@click="toggleShortcutGuide()"
></v-icon>
</div>
<!-- End Header -->
<!-- Start Selected Responses -->
<div
class="header-content pr-3"
style="text-wrap: nowrap"
v-show="!isSelectedResponsesEmpty"
>
<v-btn icon color="primary" @click="deselectAll">
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
{{
$t("header.selectedResponsesCount", {
selectedCount: store.state.selectedResponses.length,
})
}}
</div>
<div
class="header-content overflow-auto"
v-show="!isSelectedResponsesEmpty"
>
<v-btn
v-for="action in userActions"
color="primary"
class="no-text-transform"
:text="action.name"
:key="action.index"
@click="callAction(action)"
></v-btn>
</div>
<!-- End Selected Responses -->
</v-app-bar>
</v-slide-y-transition>
<FindModal ref="findRef"></FindModal>

<ChatMessages :chat="currentChat" :columns="columns"></ChatMessages>
Expand Down Expand Up @@ -157,6 +171,7 @@ import {
SHORTCUT_SHORTCUT_GUIDE,
SHORTCUT_CLEAR_MESSAGES,
SHORTCUT_CHAT_DRAWER,
SHORTCUT_APP_BAR,
} from "./components/ShortcutGuide/shortcut.const";
import i18n from "./i18n";
Expand Down Expand Up @@ -208,6 +223,7 @@ const shortcutGuideRef = ref(null);
const isShortcutGuideOpen = ref(false);
const isSettingsOpen = ref(false);
const isChatDrawerOpen = ref(store.state.isChatDrawerOpen);
const isShowAppBar = ref(store.state.general.isShowAppBar);
const chatDrawerRef = ref();
const isSelectedResponsesEmpty = ref(true);
const isChatActionOpen = ref(false);
Expand Down Expand Up @@ -236,9 +252,10 @@ function openFind() {
}
function toggleShortcutGuide() {
if (!isChatDrawerOpen.value) {
if (!isChatDrawerOpen.value || !isShowAppBar.value) {
// open chat drawer to show new chat shortcut
isChatDrawerOpen.value = true;
isShowAppBar.value = true;
setTimeout(() => {
shortcutGuideRef.value.toggleShortcutGuide();
}, 200);
Expand Down Expand Up @@ -281,6 +298,15 @@ watch(
},
);
watch(
() => isShowAppBar.value,
() =>
store.commit("setGeneral", {
isShowAppBar: isShowAppBar.value,
isShowMenuBar: isShowAppBar.value,
}),
);
function getColumnImage(columnCount) {
return require(`@/assets/column-${columnCount}.svg`);
}
Expand Down Expand Up @@ -391,4 +417,7 @@ img.selected {
.no-text-transform {
text-transform: none !important;
}
.paddingTopZero {
padding-top: 0!important;
}
</style>
4 changes: 4 additions & 0 deletions src/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,6 +365,10 @@ ipcMain.handle("save-proxy-and-restart", async () => {
});
// Proxy Setting End

ipcMain.handle("set-is-show-menu-bar", (_, isShowMenuBar) => {
mainWindow.setMenuBarVisibility(isShowMenuBar);
});

ipcMain.handle("get-cookies", async (event, filter) => {
return await getCookies(filter);
});
Expand Down
17 changes: 15 additions & 2 deletions src/components/BotSettings/CommonBotSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"
></v-text-field>
<v-select
v-if="setting.type === Type.Select"
v-else-if="setting.type === Type.Select"
v-model="settingState[setting.name]"
outlined
dense
Expand Down Expand Up @@ -78,7 +78,7 @@
</template>
</v-slider>
<v-combobox
v-if="setting.type === Type.Combobox"
v-else-if="setting.type === Type.Combobox"
v-model="settingState[setting.name]"
outlined
dense
Expand All @@ -90,6 +90,19 @@
store.commit(mutationType, { [setting.name]: $event })
"
></v-combobox>
<v-checkbox
v-else-if="setting.type === Type.Checkbox"
v-model="settingState[setting.name]"
outlined
dense
color="primary"
:label="setting.label"
:placeholder="setting.placeholder"
:hide-details="setting.hideDetails"
@update:model-value="
store.commit(mutationType, { [setting.name]: $event })
"
></v-checkbox>
</template>
</v-list-item>
</template>
Expand Down
1 change: 1 addition & 0 deletions src/components/BotSettings/settings.const.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ export const Type = {
Slider: 1,
Select: 2,
Combobox: 3,
Checkbox: 4,
};
Loading

0 comments on commit d937e53

Please sign in to comment.