getting ready for more apis...

This commit is contained in:
end-4
2023-12-28 01:31:09 +07:00
parent 5454b3cad3
commit b0eb943ebc
8 changed files with 260 additions and 102 deletions
+107 -65
View File
@@ -7,105 +7,124 @@ import { setupCursorHover } from "../../lib/cursorhover.js";
import { NavigationIndicator } from "../../lib/navigationindicator.js";
import toolBox from './toolbox.js';
import apiWidgets from './apiwidgets.js';
import { chatEntry } from './apiwidgets.js';
import apiwidgets, { chatEntry } from './apiwidgets.js';
const SidebarTabButton = (stack, stackItem, navIndicator, navIndex, icon, label) => Widget.Button({
const contents = [
{
name: 'apis',
content: apiWidgets,
materialIcon: 'api',
friendlyName: 'APIs',
},
{
name: 'tools',
content: toolBox,
materialIcon: 'home_repair_service',
friendlyName: 'Tools',
},
]
let currentTabId = 0;
const contentStack = Stack({
vexpand: true,
transition: 'slide_left_right',
items: contents.map(item => [item.name, item.content]),
})
function switchToTab(id) {
const allTabs = navTabs.get_children();
const tabButton = allTabs[id];
allTabs[currentTabId].toggleClassName('sidebar-selector-tab-active', false);
allTabs[id].toggleClassName('sidebar-selector-tab-active', true);
contentStack.shown = contents[id].name;
if (tabButton) {
// Fancy highlighter line width
const buttonWidth = tabButton.get_allocated_width();
const highlightWidth = tabButton.get_children()[0].get_allocated_width();
navIndicator.css = `
font-size: ${id}px;
padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
`;
}
currentTabId = id;
}
const SidebarTabButton = (navIndex) => Widget.Button({
// hexpand: true,
className: 'sidebar-selector-tab',
onClicked: (self) => {
stack.shown = stackItem;
// Add active class to self and remove for others
const allTabs = self.get_parent().get_children();
for (let i = 0; i < allTabs.length; i++) {
if (allTabs[i] != self) allTabs[i].toggleClassName('sidebar-selector-tab-active', false);
else self.toggleClassName('sidebar-selector-tab-active', true);
}
// Fancy highlighter line width
const buttonWidth = self.get_allocated_width();
const highlightWidth = self.get_children()[0].get_allocated_width();
navIndicator.css = `
font-size: ${navIndex}px;
padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
`;
switchToTab(navIndex);
},
child: Box({
hpack: 'center',
className: 'spacing-h-5',
children: [
MaterialIcon(icon, 'larger'),
MaterialIcon(contents[navIndex].materialIcon, 'larger'),
Label({
className: 'txt txt-smallie',
label: label,
label: `${contents[navIndex].friendlyName}`,
})
]
}),
setup: (button) => Utils.timeout(1, () => {
setupCursorHover(button);
button.toggleClassName('sidebar-selector-tab-active', defaultTab === stackItem);
button.toggleClassName('sidebar-selector-tab-active', currentTabId == navIndex);
}),
});
const defaultTab = 'apis';
const contentStack = Stack({
vexpand: true,
transition: 'slide_left_right',
items: [
['apis', apiWidgets],
['tools', toolBox],
],
})
const navTabs = Box({
homogeneous: true,
children: contents.map((item, id) =>
SidebarTabButton(id, item.materialIcon, item.friendlyName)
),
});
const navIndicator = NavigationIndicator(2, false, { // The line thing
className: 'sidebar-selector-highlight',
css: 'font-size: 0px; padding: 0rem 4.160rem;', // Shushhhh
})
});
const navBar = Box({
vertical: true,
hexpand: true,
children: [
Box({
homogeneous: true,
children: [
SidebarTabButton(contentStack, 'apis', navIndicator, 0, 'api', 'APIs'),
SidebarTabButton(contentStack, 'tools', navIndicator, 1, 'home_repair_service', 'Tools'),
]
}),
navTabs,
navIndicator,
]
})
});
const pinButton = Button({
properties: [
['enabled', false],
['toggle', (self) => {
self._enabled = !self._enabled;
self.toggleClassName('sidebar-pin-enabled', self._enabled);
const sideleftWindow = App.getWindow('sideleft');
const barWindow = App.getWindow('bar');
const cornerTopLeftWindow = App.getWindow('cornertl');
const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
sideleftContent.toggleClassName('sidebar-pinned', self._enabled);
if (self._enabled) {
sideleftWindow.layer = 'bottom';
barWindow.layer = 'bottom';
cornerTopLeftWindow.layer = 'bottom';
sideleftWindow.exclusivity = 'exclusive';
}
else {
sideleftWindow.layer = 'top';
barWindow.layer = 'top';
cornerTopLeftWindow.layer = 'top';
sideleftWindow.exclusivity = 'normal';
}
}],
],
vpack: 'start',
className: 'sidebar-pin',
child: MaterialIcon('push_pin', 'larger'),
tooltipText: 'Pin sidebar',
onClicked: (self) => {
self._enabled = !self._enabled;
self.toggleClassName('sidebar-pin-enabled', self._enabled);
const sideleftWindow = App.getWindow('sideleft');
const barWindow = App.getWindow('bar');
const cornerTopLeftWindow = App.getWindow('cornertl');
const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
sideleftWindow.exclusivity = (self._enabled ? 'exclusive' : 'normal');
sideleftContent.toggleClassName('sidebar-pinned', self._enabled);
if(self._enabled) {
sideleftWindow.layer = 'bottom';
barWindow.layer = 'bottom';
cornerTopLeftWindow.layer = 'bottom';
}
else {
sideleftWindow.layer = 'top';
barWindow.layer = 'top';
cornerTopLeftWindow.layer = 'top';
}
},
onClicked: (self) => self._toggle(self),
// QoL: Focus Pin button on open. Hit keybind -> space/enter = toggle pin state
connections: [[App, (self, currentName, visible) => {
if (currentName === 'sideleft' && visible) {
@@ -128,7 +147,7 @@ export default () => Box({
Box({
vertical: true,
vexpand: true,
className: 'sidebar-left',
className: 'sidebar-left spacing-v-10',
children: [
Box({
className: 'spacing-h-10',
@@ -147,15 +166,38 @@ export default () => Box({
}),
],
connections: [
['key-press-event', (widget, event) => { // Typing
if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space) {
if (contentStack.shown == 'apis') {
['key-press-event', (widget, event) => { // Handle keybinds
if (event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) {
// Pin sidebar
if (event.get_keyval()[1] == Gdk.KEY_p)
pinButton._toggle(pinButton);
// Switch sidebar tab
else if (event.get_keyval()[1] === Gdk.KEY_Page_Up)
switchToTab(Math.max(currentTabId - 1), 0);
else if (event.get_keyval()[1] === Gdk.KEY_Page_Down)
switchToTab(Math.min(currentTabId + 1), contents.length);
}
if (contentStack.shown == 'apis') { // If api tab is focused
// Automatically focus entry when typing
if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space) {
chatEntry.grab_focus();
chatEntry.set_text(chatEntry.text + String.fromCharCode(event.get_keyval()[1]));
chatEntry.set_position(-1);
}
// Switch API type
else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
event.get_keyval()[1] === Gdk.KEY_Page_Down) {
const toSwitchTab = contentStack.get_visible_child();
toSwitchTab._nextTab();
}
else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
event.get_keyval()[1] === Gdk.KEY_Page_Up) {
const toSwitchTab = contentStack.get_visible_child();
toSwitchTab._prevTab();
}
}
}],
],
});