Skip to content

Commit

Permalink
v0.1.9.1
Browse files Browse the repository at this point in the history 
## Summary
Added a minimize/restore function to hide/show the entire panel.

##module\settings.js
* Added the setting showTickerPanel

##module\ticker-panel.js
* in getData(options), added the option panelVisible
* in activateListeners($html), added a new listener for `[data-action=ticker-visibility]`

##styles\style.css
* Added the new minimize/restore buttons to the same styles as the add-ticker button for visual consistency

##templates\ticker-panel.hbs
* Wrapped all list containers in an if statement that checks if panelVisible
* Added minimize/restore buttons to new button panel
* Moved `Add Ticker` button to new button panel
  • Loading branch information
@MythicPalette
MythicPalette committed Jul 10, 2024
1 parent c51d199 commit 6fc9502
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 74 deletions.
10 changes: 10 additions & 0 deletions module/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,16 @@ function registerSettings() {
window.tickerPanel.render(true);
}
});

game.settings.register(MODULE_ID, "showTickerPanel", {
name: "Show Ticker Panel",
config: false,
type: Boolean,
default: true,
onChange: () => {
window.tickerPanel.render(true);
}
})
}

class DisplaySettings extends FormApplication {
Expand Down
10 changes: 8 additions & 2 deletions module/ticker-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,8 @@ export class TickerPanel extends Application {
editable: true,
isGM: game.user.isGM,
id: game.user.id,
showPersonal: bShow
showPersonal: bShow,
panelVisible: game.settings.get(MODULE_ID, "showTickerPanel")
},
verticalEdge: this.verticalEdge,
GMTickers: this.verticalEdge === "bottom" ? gmTickers.reverse() : gmTickers,
Expand Down Expand Up @@ -253,7 +254,12 @@ export class TickerPanel extends Application {
collapsed.push(target);
game.settings.set(MODULE_ID, "collapsedHeaders", collapsed);
}
})
});

$html.find("[data-action=ticker-visibility]").on("click", async (event) => {
let show = game.settings.get(MODULE_ID, "showTickerPanel");
game.settings.set(MODULE_ID, "showTickerPanel", !show);
});

$html.find("[data-action=add-ticker]").on("click", async () => {
new TickerAddDialog(null, (data) => this.db.addTicker(data)).render(true);
Expand Down
8 changes: 6 additions & 2 deletions styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,22 @@
display: inline;
}

.ticker-panel .ticker-entry, .ticker-panel [data-action=add-ticker] {
.ticker-panel .ticker-entry, .ticker-panel [data-action=add-ticker], .ticker-panel [data-action=ticker-visibility] {
background: rgba(15, 15, 15, 0.7);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
color: white;
}

.ticker-panel [data-action=add-ticker] {
.ticker-panel [data-action=add-ticker], .ticker-panel [data-action=ticker-visibility] {
border-radius: 5px;
padding: 4px 6px;
margin-right: 4px;
}

.ticker-panel [data-action=ticker-visibility]:hover > span {
display: inline-block !important;
}

.ticker-panel .ticker-entry {
display: flex;
flex-direction: row-reverse;
Expand Down
149 changes: 79 additions & 70 deletions templates/ticker-panel.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,89 @@
<section
class="ticker-panel {{#if @root.options.editable}}editable{{/if}} {{verticalEdge}}"
style="--offset: {{offset}}">
{{#if GMTickers.[0]}}
<div class="list-container">
<a class="ticker-label" data-target="gm-ticker-list" data-action="collapse">GM</a>
<div id="gm-ticker-list" class="ticker-list gm-ticker-list">
{{#each GMTickers as |gmticker|}}
<div class="ticker-entry gm-ticker-entry" data-id="{{gmticker.id}}">
<div class="ticker" style="--areas: {{gmticker.max}}; --filled: {{gmticker.value}}; --ticker-color: {{gmticker.color}}">
{{#each gmticker.spokes}}
<div class="spoke" style="--index: {{ this }}"></div>
{{/each}}
{{#if @root.options.panelVisible}}
{{#if GMTickers.[0]}}
<div class="list-container">
<a class="ticker-label" data-target="gm-ticker-list" data-action="collapse">GM</a>
<div id="gm-ticker-list" class="ticker-list gm-ticker-list">
{{#each GMTickers as |gmticker|}}
<div class="ticker-entry gm-ticker-entry" data-id="{{gmticker.id}}">
<div class="ticker" style="--areas: {{gmticker.max}}; --filled: {{gmticker.value}}; --ticker-color: {{gmticker.color}}">
{{#each gmticker.spokes}}
<div class="spoke" style="--index: {{ this }}"></div>
{{/each}}
</div>
<div class="name-section">
{{#if @root.options.isGM}}
<div class="controls">
<a data-action="delete-ticker"><i class="fas fa-trash"></i></a>
<a data-action="edit-ticker"><i class="fas fa-edit"></i></a>
</div>
{{/if}}
<div class="name">{{#if gmticker.private}}<i class="fas fa-eye-slash"></i>{{/if}} {{gmticker.name}}</div>
</div>
</div>
<div class="name-section">
{{#if @root.options.isGM}}
<div class="controls">
<a data-action="delete-ticker"><i class="fas fa-trash"></i></a>
<a data-action="edit-ticker"><i class="fas fa-edit"></i></a>
</div>
{{/if}}
<div class="name">{{#if gmticker.private}}<i class="fas fa-eye-slash"></i>{{/if}} {{gmticker.name}}</div>
</div>
</div>
{{/each}}
{{/each}}
</div>
</div>
</div>
{{/if}}
{{#if SharedTickers.[0]}}
<div class="list-container">
<a class="ticker-label" data-target="shared-ticker-list" data-action="collapse">Shared</a>
<div id="shared-ticker-list" class="ticker-list shared-ticker-list {{#if SharedCollapsed}}hidden{{/if}}">
{{#each SharedTickers as |sharedticker|}}
<div class="ticker-entry shared-ticker-entry" data-id="{{sharedticker.id}}">
<div class="ticker" style="--areas: {{sharedticker.max}}; --filled: {{sharedticker.value}}; --ticker-color: {{sharedticker.color}}">
{{#each sharedticker.spokes}}
<div class="spoke" style="--index: {{ this }}"></div>
{{/each}}
</div>
<div class="name-section">
{{#if sharedticker.editable}}
<div class="controls">
<a data-action="delete-ticker"><i class="fas fa-trash"></i></a>
<a data-action="edit-ticker"><i class="fas fa-edit"></i></a>
</div>
{{/if}}
<div class="name">{{sharedticker.name}}</div>
{{/if}}
{{#if SharedTickers.[0]}}
<div class="list-container">
<a class="ticker-label" data-target="shared-ticker-list" data-action="collapse">Shared</a>
<div id="shared-ticker-list" class="ticker-list shared-ticker-list {{#if SharedCollapsed}}hidden{{/if}}">
{{#each SharedTickers as |sharedticker|}}
<div class="ticker-entry shared-ticker-entry" data-id="{{sharedticker.id}}">
<div class="ticker" style="--areas: {{sharedticker.max}}; --filled: {{sharedticker.value}}; --ticker-color: {{sharedticker.color}}">
{{#each sharedticker.spokes}}
<div class="spoke" style="--index: {{ this }}"></div>
{{/each}}
</div>
<div class="name-section">
{{#if sharedticker.editable}}
<div class="controls">
<a data-action="delete-ticker"><i class="fas fa-trash"></i></a>
<a data-action="edit-ticker"><i class="fas fa-edit"></i></a>
</div>
{{/if}}
<div class="name">{{sharedticker.name}}</div>
</div>
</div>
</div>
{{/each}}
{{/each}}
</div>
</div>
</div>
{{/if}}
{{#each UserTickers as |user|}}
<div class="list-container {{#if (not user.visCount)}}hidden{{/if}}">
<a class="ticker-label" data-target="{{user.id}}" data-action="collapse">{{user.name}}</a>
<div class="ticker-list {{#if user.collapsed}}hidden{{/if}}" data-id="{{user.id}}">
{{#each user.tickers as |ticker|}}
<div class="ticker-entry user-ticker-entry {{#if (not ticker.viewable)}}hidden{{/if}}" data-id="{{ticker.id}}">
<div class="ticker" style="--areas: {{ticker.max}}; --filled: {{ticker.value}}; --ticker-color: {{ticker.color}}">
{{#each ticker.spokes}}
<div class="spoke" style="--index: {{ this }}"></div>
{{/each}}
</div>
<div class="name-section">
{{#if (or ticker.ownedByUser @root.options.isGM)}}
<div class="controls">
<a data-action="delete-ticker"><i class="fas fa-trash"></i></a>
<a data-action="edit-ticker"><i class="fas fa-edit"></i></a>
</div>
{{/if}}
<div class="name">{{#if ticker.private}}<i class="fas fa-eye-slash"></i>{{/if}}{{ticker.name}}</div>
{{/if}}
{{#each UserTickers as |user|}}
<div class="list-container {{#if (not user.visCount)}}hidden{{/if}}">
<a class="ticker-label" data-target="{{user.id}}" data-action="collapse">{{user.name}}</a>
<div class="ticker-list {{#if user.collapsed}}hidden{{/if}}" data-id="{{user.id}}">
{{#each user.tickers as |ticker|}}
<div class="ticker-entry user-ticker-entry {{#if (not ticker.viewable)}}hidden{{/if}}" data-id="{{ticker.id}}">
<div class="ticker" style="--areas: {{ticker.max}}; --filled: {{ticker.value}}; --ticker-color: {{ticker.color}}">
{{#each ticker.spokes}}
<div class="spoke" style="--index: {{ this }}"></div>
{{/each}}
</div>
<div class="name-section">
{{#if (or ticker.ownedByUser @root.options.isGM)}}
<div class="controls">
<a data-action="delete-ticker"><i class="fas fa-trash"></i></a>
<a data-action="edit-ticker"><i class="fas fa-edit"></i></a>
</div>
{{/if}}
<div class="name">{{#if ticker.private}}<i class="fas fa-eye-slash"></i>{{/if}}{{ticker.name}}</div>
</div>
</div>
</div>
{{/each}}
{{/each}}
</div>
</div>
</div>
{{/each}}
<a data-action="add-ticker"><i class="fas fa-plus"></i> {{localize "SimpleTickers.AddTicker"}}</a>
{{/each}}
{{/if}}
<div class="st-button-panel">
{{#if @root.options.panelVisible}}
<a data-action="add-ticker"><i class="fas fa-plus"></i><span class="label-text"> {{localize "SimpleTickers.AddTicker"}}</span></a>
<a data-action="ticker-visibility" class="hide-text-label" title="Hide Tickers"><i class="fa-regular fa-square-minus"></i> Hide</a>
{{else}}
<a data-action="ticker-visibility" class="hide-text-label" title="Restore Tickers"><i class="fa-regular fa-window-restore"></i></a>
{{/if}}
</div>
</section>

0 comments on commit 6fc9502

Please sign in to comment.