obsidian-plugin/martindampier_draw-steel-retainer
1
0
Fork 0
mirror of https://github.com/martindampier/draw-steel-retainer.git synced 2026-07-22 05:44:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change table UI

Browse source
This commit is contained in:
MartinDampier 2025-06-25 21:03:08 -05:00
parent b47c025092
commit 771d47c101
2 changed files with 45 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
lib/Views/InitiativeTrackerView.ts
View file

@ -54,20 +54,10 @@ export class InitiativeView extends ItemView {
}
async onOpen() {
function createHeader(header:string, parent:HTMLElement): void {
let headerElement = parent.createDiv({cls: "flex"});
headerElement.createEl('h3', {text: header})
}
this.contentEl.empty();
this.gridEl = this.contentEl.createDiv();
this.createInputSection();
createHeader("Heroes", this.gridEl);
this.createTable(true);
createHeader("Villains", this.gridEl);
this.createTable(false);
}
@ -184,7 +174,7 @@ export class InitiativeView extends ItemView {
}
//Create a HTML Table
createTable(isHero: boolean) {
let classes = "Centered" + (isHero ? " heroes" : " villains") + ' trackerTableStyle';
let classes = "Centered" + (isHero ? " heroes" : " villains") + ' trackerTableStyle fiveTopAndBottomMargin';
if (isHero)
{
this.heroesTableEl = this.gridEl.createEl('table', {cls: classes});
@ -193,28 +183,30 @@ export class InitiativeView extends ItemView {
{
this.villainsTableEl = this.gridEl.createEl('table', {cls: classes});
}
let header = isHero ? this.heroesTableEl.createEl('tr') : this.villainsTableEl.createEl('tr');
let header = isHero ? this.heroesTableEl.createEl('tr', {cls: 'tableHeaderHeight'}) : this.villainsTableEl.createEl('tr', {cls: 'tableHeaderHeight'});
let titleCell = header.createEl('th', { cls: 'ninetyPercentWidth leftAlign'});
isHero ? titleCell.createEl("h4", {text: "Heroes", cls: "noPaddingNoMargin"}) : titleCell.createEl("h4", {text: "Villains", cls: "noPaddingNoMargin"});
// header.createEl('th', {text: 'Character', cls: 'name-Cell trackerTableCellStyle'});
// header.createEl('th', {text: 'Stamina', cls: 'stamina-Cell trackerTableCellStyle'});
// header.createEl('th', {text: 'TA', title: "Triggered Action", cls: 'trackerTableCellStyle'});
// header.createEl('th', {text: 'Acted', cls: 'trackerTableCellStyle'});
// let createButtonHeader = header.createEl('th', { cls: 'trackerTableCellStyle'});
// let resetButtonComp = new ExtraButtonComponent(createButtonHeader)
// resetButtonComp.extraSettingsEl.setText("Clear");
// resetButtonComp.extraSettingsEl.addClass("headerButtonRight");
// resetButtonComp.extraSettingsEl.addClass("twentyPixelHeight");
// resetButtonComp.extraSettingsEl.addClass("interactiveColor");
// if (isHero) {
// resetButtonComp.onClick( () => {
// this.clearHeroesTable();
// });
// }
// else {
// resetButtonComp.onClick( () => {
// this.clearVillainsTable();
// });
// }
let createButtonHeader = header.createEl('th', {cls: 'tenPercentWidth'});
let resetButtonComp = new ExtraButtonComponent(createButtonHeader)
resetButtonComp.extraSettingsEl.setText("Clear");
resetButtonComp.extraSettingsEl.addClass("headerButtonRight");
resetButtonComp.extraSettingsEl.addClass("fullFill");
resetButtonComp.extraSettingsEl.addClass("interactiveColor");
if (isHero) {
resetButtonComp.onClick( () => {
this.clearHeroesTable();
});
}
else {
resetButtonComp.onClick( () => {
this.clearVillainsTable();
});
}
if (isHero && this.heroes.length > -1)
{
this.heroes.forEach((creature) => this.createCreatureRow(creature, isHero));

30
styles.css
View file

@ -14,16 +14,36 @@
.thirdWidth{
width: 33%;
}
.ninetyPercentWidth{
width: 90%;
}
.tenPercentWidth{
width: 10%;
}
.maxThirdWidth{
max-width: 33%;
}
.noPaddingNoMargin{
padding: 0px;
margin: 0px;
}
.fiveTopAndBottomMargin{
margin-top: 5px;
margin-bottom: 5px;
}
.minthirdWidth{
min-width: 33%;
}
.fullWidth{
width: 100%;
}
.tableHeaderHeight {
height: 30px;
display: flex;
}
.rowHeight {
height: 70px;
}
@ -97,6 +117,10 @@
height: 90%;
width: 90%;
}
.fullFill{
height: 90%;
width: 90%;
}
.padded-input {
margin-left: 5px;
@ -127,10 +151,6 @@
margin-right: 5px;
}
.twentyPixelHeight{
height: 20px;
}
.interactiveColor {
background-color: var(--interactive-normal);
box-shadow: var(--input-shadow);