cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-11 19:25:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feature/ 179 apply items filter in actors sheet (#249)

Browse source 
* FEAT: create FilterMenu class
FEAT: add FilterMenu to CharacterSheet

* FEAT: filter menu style

* FIX: file's names and import

* FEAT: add filters getters on FilterMenu class

* REFACTOR: prettier

* FIX: add again the Filter Menu implementation

---------

Co-authored-by: Joaquin Pereyra <joaquinpereyra98@users.noreply.github.com>
This commit is contained in:
joaquinpereyra98 2025-07-03 01:30:23 -03:00 • committed by GitHub
parent 9fb9a4af55
commit 1b9bd45e9c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 478 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

42
styles/daggerheart.css
View file

@ -4206,6 +4206,10 @@ div.daggerheart.views.multiclass {
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input:placeholder {
color: light-dark(#18162e50, #efe6d850);
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar .icon {
align-content: center;
height: 32px;
@ -6054,6 +6058,44 @@ div.daggerheart.views.multiclass {
.application prose-mirror .editor-content h3 {
font-size: 24px;
}
.filter-menu {
width: auto;
}
.filter-menu fieldset.filter-section {
align-items: center;
margin: 5px;
border-radius: 6px;
border-color: light-dark(#18162e, #f3c267);
padding: 5px;
}
.filter-menu fieldset.filter-section legend {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: light-dark(#18162e, #f3c267);
font-size: var(--font-size-12);
}
.filter-menu fieldset.filter-section .filter-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 5px;
}
.filter-menu fieldset.filter-section .filter-buttons button {
background: light-dark(rgba(0, 0, 0, 0.3), #18162e);
color: light-dark(#18162e, #f3c267);
outline: none;
box-shadow: none;
border: 1px solid light-dark(#18162e, #18162e);
padding: 0 0.2rem;
font-size: var(--font-size-12);
}
.filter-menu fieldset.filter-section .filter-buttons button:hover {
background: light-dark(transparent, #f3c267);
color: light-dark(#18162e, #18162e);
}
.filter-menu fieldset.filter-section .filter-buttons button.active {
animation: glow 0.75s infinite alternate;
}
.daggerheart {
/* Flex */
/****/

2
styles/daggerheart.less
View file

@ -64,6 +64,8 @@
@import './less/global/inventory-item.less';
@import './less/global/inventory-fieldset-items.less';
@import './less/global/prose-mirror.less';
@import "./less/global/filter-menu.less";
@import '../node_modules/@yaireo/tagify/dist/tagify.css';
.daggerheart {

5
styles/less/actors/character/loadout.less
View file

@ -30,6 +30,11 @@
&:placeholder {
color: light-dark(@dark-blue-50, @beige-50);
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
}
.icon {

47
styles/less/global/filter-menu.less Normal file
View file

@ -0,0 +1,47 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
.filter-menu {
width: auto;
fieldset.filter-section {
align-items: center;
margin: 5px;
border-radius: 6px;
border-color: light-dark(@dark-blue, @golden);
padding: 5px;
legend {
font-family: @font-body;
font-weight: bold;
color: light-dark(@dark-blue, @golden);
font-size: var(--font-size-12);
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 5px;
button {
background: light-dark(@light-black, @dark-blue);
color: light-dark(@dark-blue, @golden);
outline: none;
box-shadow: none;
border: 1px solid light-dark(@dark-blue, @dark-blue);
padding: 0 0.2rem;
font-size: var(--font-size-12);
&:hover {
background: light-dark(transparent, @golden);
color: light-dark(@dark-blue, @dark-blue);
}
&.active {
animation: glow 0.75s infinite alternate;
}
}
}
}
}