Skip to content

Commit

Permalink
Added missing css
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronzulu
ronzulu committed Jul 19, 2024
1 parent d162d56 commit 965c394
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 15 deletions.
26 changes: 13 additions & 13 deletions src/gui/Tabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ interface TabButtons {
}

export function createTabs(container_element: HTMLElement, tabs: Tabs, activateTabId: string): TabStructure {
const tab_header = container_element.createEl("div", {attr: {class: "SC-tab-header"}});
const tab_header = container_element.createEl("div", {attr: {class: "sr-tab-header"}});
const tab_content_containers: TabContentContainers = {};
const tab_buttons: TabButtons = {};
const tab_structure: TabStructure = {
Expand All @@ -69,8 +69,8 @@ export function createTabs(container_element: HTMLElement, tabs: Tabs, activateT
// Create button
const button = tab_header.createEl("button", {
attr: {
class: "SC-tab-header-button",
activateTab: "SC-tab-" + tab_id,
class: "sr-tab-header-button",
activateTab: "sr-tab-" + tab_id,
},
});
button.onclick = function (event: MouseEvent) {
Expand All @@ -87,15 +87,15 @@ export function createTabs(container_element: HTMLElement, tabs: Tabs, activateT
if (null === container_element) {
throw new Error("Container element is missing. Did not get a parent from tab header.");
}
const tab_contents = container_element.findAll("div.SC-tab-content"); // Do not get all tab contents that exist, because there might be multiple tab systems open at the same time.
const tab_contents = container_element.findAll("div.sr-tab-content"); // Do not get all tab contents that exist, because there might be multiple tab systems open at the same time.
const is_main_settings_modal = container_element.hasClass("vertical-tab-content");
for (const index in tab_contents) {
const tab_content = tab_contents[index];

// Get the maximum tab dimensions so that all tabs can have the same dimensions.
// But don't do it if this is the main settings modal
if (!is_main_settings_modal) {
tab_content.addClass("SC-tab-active"); // Need to make the tab visible temporarily in order to get the dimensions.
tab_content.addClass("sr-tab-active"); // Need to make the tab visible temporarily in order to get the dimensions.
if (tab_content.offsetHeight > max_height) {
max_height = tab_content.offsetHeight;
}
Expand All @@ -105,18 +105,18 @@ export function createTabs(container_element: HTMLElement, tabs: Tabs, activateT
}

// Finally hide the tab
tab_content.removeClass("SC-tab-active");
tab_content.removeClass("sr-tab-active");
}

// Remove active status from all buttons
const adjacent_tab_buttons = tab_header.findAll(".SC-tab-header-button"); // Do not get all tab buttons that exist, because there might be multiple tab systems open at the same time.
const adjacent_tab_buttons = tab_header.findAll(".sr-tab-header-button"); // Do not get all tab buttons that exist, because there might be multiple tab systems open at the same time.
for (const index in adjacent_tab_buttons) {
const tab_button = adjacent_tab_buttons[index];
tab_button.removeClass("SC-tab-active");
tab_button.removeClass("sr-tab-active");
}

// Activate the clicked tab
tab_button.addClass("SC-tab-active");
tab_button.addClass("sr-tab-active");
const activateTabAttribute: Attr | null = tab_button.attributes.getNamedItem("activateTab");
if (null === activateTabAttribute) {
throw new Error("Tab button has no 'activateTab' HTML attribute! Murr!");
Expand All @@ -126,13 +126,13 @@ export function createTabs(container_element: HTMLElement, tabs: Tabs, activateT
if (null === tab_content) {
throw new Error("No tab content was found with activate_tab_id '"+activate_tab_id+"'! Hmph!");
}
tab_content.addClass("SC-tab-active");
tab_content.addClass("sr-tab-active");

// Mark the clicked tab as active in TabStructure (just to report which tab is currently active)
tab_structure.active_tab_id = activate_tab_id.replace(/^SC-tab-/, ""); // Remove "SC-tab" prefix.
tab_structure.active_tab_id = activate_tab_id.replace(/^sr-tab-/, ""); // Remove "sr-tab" prefix.

// Focus an element (if a focusable element is present)
tab_content.find(".SC-focus-element-on-tab-opening")?.focus(); // ? = If not found, do nothing.
tab_content.find(".sr-focus-element-on-tab-opening")?.focus(); // ? = If not found, do nothing.

// Apply the max dimensions to this tab
// But don't do it if this is the main settings modal
Expand All @@ -151,7 +151,7 @@ export function createTabs(container_element: HTMLElement, tabs: Tabs, activateT
tab_buttons[tab_id] = button;

// Create content container
tab_content_containers[tab_id] = container_element.createEl("div", {attr: {class: "SC-tab-content", id: "SC-tab-" + tab_id}});
tab_content_containers[tab_id] = container_element.createEl("div", {attr: {class: "sr-tab-content", id: "sr-tab-" + tab_id}});

// Generate content
tab_structure.contentGeneratorPromises[tab_id] = tab.content_generator(tab_content_containers[tab_id]);
Expand Down
4 changes: 2 additions & 2 deletions src/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export class SRSettingTab extends PluginSettingTab {

containerEl.empty();

const header = containerEl.createEl("h1", { text: `${t("SETTINGS_HEADER")}` });
const header = containerEl.createEl("h4", { text: `${t("SETTINGS_HEADER")}` });
header.addClass("sr-centered");

this.tab_structure = createTabs(
Expand Down Expand Up @@ -910,7 +910,7 @@ console.log(`tabNotes`);
// Copyright notice
const copyright_paragraph = containerEl.createEl("p");
copyright_paragraph.addClass("SC-small-font");
copyright_paragraph.addClass("sr-small-font");
copyright_paragraph.insertAdjacentHTML("beforeend", `
<em>Shell commands</em> plugin Copyright &copy; 2021 - 2023 Jarkko Linnanvirta. This program comes with ABSOLUTELY NO WARRANTY. This is free software, and you are welcome to redistribute it under certain conditions. See more information in the license: <a href="${GitHub.license}">GNU GPL-3.0</a>.
`); */
Expand Down
55 changes: 55 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,3 +282,58 @@ body:not(.native-scrollbars) #sr-modal .modal-close-button {
appearance: menulist;
border-right: 8px solid transparent;
}

/*
* Tab elements
* This CSS is copied from https://github.com/Taitava/obsidian-shellcommands
* Jarkko Linnanvirta https://github.com/Taitava comments below...
* - Renamed classes
*
* This CSS is copied 2021-10-21 from https://www.w3schools.com/howto/howto_js_tabs.asp
* Modifications:
* - Renamed classes
* - Added tab icons.
* - Changed colors.
* - Changed/removed borders.
* - Removed button transition.
* - Changed button border-radiuses
* - Added margin-right rule to .sr-tab-header-button .
*/

/* Style the tab */
.sr-tab-header {
border-bottom: 6px solid var(--background-modifier-border);
}

/* Style the buttons that are used to open the tab content */
button.sr-tab-header-button {
background-color: unset;
border: none;
box-shadow: none; /* Remove a "border" that came via Obsidian 0.16.0. */
outline: none;
cursor: pointer;
padding: 14px 16px;
margin-right: 6px; /* Reduced margin. Obsidian's default margin-right for button is 12px (0 for other margins). */
border-radius: 10px 10px 0 0; /* 0 0 = No border-radius at bottom */
}

/* Create an active/current tablink class */
button.sr-tab-header-button.sr-tab-active,
button.sr-tab-header-button:hover {
background-color: var(--background-modifier-border);
}

.sr-tab-header-button svg {
vertical-align: middle; /* Not middle but close enough. */
}

/* Style the tab content */
.sr-tab-content {
display: none;
padding: 6px 12px;
}

.sr-tab-content.sr-tab-active {
display: block;
}

0 comments on commit 965c394

Please sign in to comment.