mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-14 10:12:21 +00:00
feat(filters): add button to hide tags and restyle
**filters.styl** * restyle tags and filter controls using global styles **filter.jade** * add button to toggle visibility * change controls from icons to text **global-modules** * add new extends and mixins for button bar and tags **global-colors.styl** * add tag colours
This commit is contained in:
benmanley
parent
e60cf01b6f
commit
1ff77932ff
4 changed files with 191 additions and 55 deletions
|
|
@ -1,25 +1,34 @@
|
|||
.filters
|
||||
|
||||
margin-top: 5px
|
||||
margin-bottom: 5px
|
||||
|
||||
.filter-description
|
||||
margin-top: 7px
|
||||
margin-right: 7px
|
||||
padding-left: 7px
|
||||
|
||||
padding-top: 1em
|
||||
padding-bottom: 0.382em
|
||||
margin-left: 0.382em
|
||||
margin-right: 0em
|
||||
ul, li
|
||||
float: left
|
||||
ul
|
||||
list-style: none
|
||||
margin-right: 1em
|
||||
.filters-controls
|
||||
@extend $hrpg-button-bar
|
||||
hrpg-button-bar-mixin($color-options-menu)
|
||||
li
|
||||
@extend $hrpg-button-master
|
||||
hrpg-button-color-mixin($color-options-menu)
|
||||
.filters-tags, .filters-edit
|
||||
margin-bottom: 0.618em
|
||||
.filters-tags
|
||||
position: relative
|
||||
left: -1em
|
||||
@extend $hrpg-tag-master
|
||||
hrpg-tag-color-mixin($color-filter-tag)
|
||||
&.challenge
|
||||
hrpg-tag-color-mixin($color-filter-tag-challenge)
|
||||
form
|
||||
display: none
|
||||
markdown
|
||||
display: inline-block
|
||||
|
||||
.glyphicon-bullhorn
|
||||
margin-right: 5px
|
||||
|
||||
.input-group
|
||||
float: left
|
||||
width: 1px // Trick for proper alignment
|
||||
margin-left: 3px
|
||||
margin-right: 3px
|
||||
margin-top: 5px
|
||||
|
||||
.form-control
|
||||
width: auto
|
||||
.hrpg-input-group
|
||||
display: inline-block
|
||||
margin-right: 0.618em
|
||||
@extend $hrpg-button-with-input
|
||||
hrpg-button-color-mixin($color-options-submenu)
|
||||
|
|
@ -13,6 +13,10 @@ $color-herobox = desaturate(lighten($better, 16%),32%)
|
|||
$color-toolbar = lighten($color-herobox, 70%)
|
||||
$color-options-menu = lighten($color-herobox, 85%)
|
||||
$color-options-submenu = lighten($color-herobox, 75%)
|
||||
|
||||
// button color variables
|
||||
$color-button-style-one = $best
|
||||
$color-button-style-one = $best
|
||||
// Task background
|
||||
$color-tasks = lighten($color-herobox, 65%)
|
||||
// Task filter colors
|
||||
$color-filter-tag = lighten($good,90%)
|
||||
$color-filter-tag-challenge = lighten($bad,90%)
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
// Buttons
|
||||
// The !important declarations override Bootstrap
|
||||
hrpg-button-color-mixin($hrpg-button-color)
|
||||
> a, button
|
||||
> a, > button
|
||||
background-color: $hrpg-button-color !important
|
||||
color: darken($hrpg-button-color, 70%) !important
|
||||
border-color: darken($hrpg-button-color, 16.18%) !important
|
||||
&:active
|
||||
background-color: darken($hrpg-button-color, 10%) !important
|
||||
@media screen and (min-width:768px)
|
||||
&:hover
|
||||
background-color: darken($hrpg-button-color, 3.82%) !important
|
||||
background-color: darken($hrpg-button-color, 2.36%) !important
|
||||
> a, > button, > input
|
||||
color: darken($hrpg-button-color, 70%) !important
|
||||
border-color: darken($hrpg-button-color, 16.18%) !important
|
||||
> a:nth-of-type(2)
|
||||
border-left: 1px solid darken($hrpg-button-color, 3.82%) !important
|
||||
> div
|
||||
|
|
@ -37,13 +38,16 @@ hrpg-button-color-mixin($hrpg-button-color)
|
|||
border-color: darken($hrpg-button-color, 38.2%) !important
|
||||
$hrpg-button-master
|
||||
list-style: none
|
||||
> a, button
|
||||
> a, > button, > input
|
||||
display: inline-block !important
|
||||
padding: 0.25em 0.5em !important
|
||||
text-decoration:none
|
||||
font-size: 1em
|
||||
color:#222
|
||||
background-color: transparent
|
||||
.glyphicon
|
||||
position: relative
|
||||
top: 0.132em
|
||||
&:active
|
||||
background-color: #aaa !important
|
||||
@media screen and (min-width:768px)
|
||||
|
|
@ -51,7 +55,7 @@ $hrpg-button-master
|
|||
background-color: #eee !important
|
||||
$hrpg-button
|
||||
@extend $hrpg-button-master
|
||||
> a, button
|
||||
> a, > button
|
||||
border: 1px solid #ccc !important
|
||||
border-radius: 0.382em !important
|
||||
$hrpg-button-call-to-action
|
||||
|
|
@ -65,6 +69,53 @@ $hrpg-button-toggle
|
|||
border-radius: 0.382em 0em 0em 0.382em !important
|
||||
> a:nth-of-type(2)
|
||||
border-radius: 0em 0.382em 0.382em 0em !important
|
||||
// Input + Button
|
||||
$hrpg-button-with-input
|
||||
@extend $hrpg-button-master
|
||||
border: none
|
||||
border-radius: 0.382em
|
||||
input, a, button
|
||||
display: block
|
||||
float: left
|
||||
height: 2em
|
||||
input
|
||||
border: 1px solid #ccc
|
||||
border-radius: 0.382em 0em 0em 0.382em
|
||||
padding-left: 0.618em
|
||||
&:hover
|
||||
background-color: #f5f5f5 !important
|
||||
a, button
|
||||
border-width: 1px
|
||||
border-color: #ccc
|
||||
border-top-style: solid
|
||||
border-right-style: solid
|
||||
border-bottom-style: solid
|
||||
border-left: none
|
||||
border-radius: 0em 0.382em 0.382em 0em
|
||||
//Button bar
|
||||
hrpg-button-bar-mixin($hrpg-button-bar-color)
|
||||
border-color: darken($hrpg-button-bar-color, 16.18)
|
||||
li
|
||||
border-right-color: darken($hrpg-button-bar-color,3.82%)
|
||||
li:first-of-type
|
||||
background-color: darken($hrpg-button-bar-color,6.18%)
|
||||
color: darken($hrpg-button-bar-color,70%)
|
||||
border-right-color: darken($hrpg-button-bar-color,16.18%)
|
||||
$hrpg-button-bar
|
||||
border: 1px solid darken(#fff,16.18%)
|
||||
border-radius: 0.382em
|
||||
margin-bottom: 0.618em
|
||||
li
|
||||
border-right: 1px solid darken(#fff,3.82%)
|
||||
li:first-of-type
|
||||
color: darken(#fff,61.8%)
|
||||
padding: 0.25em 0.5em
|
||||
border-radius: 0.382em 0em 0em 0.382em
|
||||
border-right: 1px solid darken(#fff,6.18%)
|
||||
li:last-of-type
|
||||
border-right: none
|
||||
a
|
||||
border-radius: 0em 0.382em 0.382em 0em
|
||||
// Labels
|
||||
hrpg-label-color-mixin($hrpg-label-color)
|
||||
color: lighten($hrpg-label-color, 90%) !important
|
||||
|
|
@ -183,4 +234,69 @@ $hrpg-submenu
|
|||
li
|
||||
display: inline-block
|
||||
margin-right: 1em
|
||||
margin-bottom: 1em
|
||||
margin-bottom: 1em
|
||||
// Tags
|
||||
hrpg-tag-color-mixin($hrpg-tag-color)
|
||||
background-color: darken($hrpg-tag-color,3.82%)
|
||||
&.active
|
||||
> a, > a span
|
||||
color: darken($hrpg-tag-color,3.82%)
|
||||
background-color: darken($hrpg-tag-color,32.8%)
|
||||
&:before
|
||||
border-right-color: darken($hrpg-tag-color,32.8%)
|
||||
> a, > a span
|
||||
color: darken($hrpg-tag-color,61.8%)
|
||||
&:before
|
||||
border-right-color: darken($hrpg-tag-color,3.82%)
|
||||
@media screen and (min-width:768px)
|
||||
&:hover, &:hover > a, &:hover > a span
|
||||
//color: darken($hrpg-tag-color,3.82%)
|
||||
background-color: darken($hrpg-tag-color,16.8%)
|
||||
&:hover > a:before
|
||||
border-right-color: darken($hrpg-tag-color,16.18%)
|
||||
&.active:hover, &.active:hover > a, &.active:hover > a span
|
||||
color: darken($hrpg-tag-color,3.82%)
|
||||
background-color: darken($hrpg-tag-color,32.8%)
|
||||
&.active:hover > a:before
|
||||
border-right-color: darken($hrpg-tag-color,32.8%)
|
||||
|
||||
$hrpg-tag-master
|
||||
display: inline-block
|
||||
position: relative
|
||||
width: auto
|
||||
margin-left: 1.618em
|
||||
&.active > a
|
||||
color: darken(#fff,3.82%)
|
||||
background-color: darken(#fff,32.8%)
|
||||
&:before
|
||||
border-right-color: darken(#fff,32.8%)
|
||||
a
|
||||
display: inline-block
|
||||
min-height: 2em
|
||||
padding: 0.45em 0.618em 0.45em 0.382em
|
||||
text-decoration:none
|
||||
font-size: 1em
|
||||
line-height: 1
|
||||
color:#222
|
||||
background-color: transparent
|
||||
.glyphicon-bullhorn
|
||||
margin-right: 0.618em
|
||||
font-size: 0.8em
|
||||
padding: 0;
|
||||
&:before, &:after
|
||||
display: block
|
||||
content:'';
|
||||
position: absolute
|
||||
top: 0
|
||||
left: -1.5em
|
||||
&:before
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid transparent
|
||||
border-right: 1.5em solid darken(#fff,3.82%)
|
||||
border-bottom: 1em solid transparent
|
||||
&:after
|
||||
width: 0.75em;
|
||||
min-height:2em;
|
||||
background-color: #fff
|
||||
z-index: 2
|
||||
|
|
|
|||
|
|
@ -1,29 +1,36 @@
|
|||
.container-fluid
|
||||
.row
|
||||
.row
|
||||
.filters.col-md-12(ng-controller='FiltersCtrl')
|
||||
.pull-left.filter-description
|
||||
=env.t('tags')
|
||||
|:
|
||||
ul.nav.nav-pills
|
||||
ul.filters-controls
|
||||
li=env.t('tags')
|
||||
//- Edit button
|
||||
li
|
||||
a(rel='tooltip', title=env.t('editTags'), ng-click='saveOrEdit()')
|
||||
span.glyphicon(ng-class='{"glyphicon-ok": _editing, "glyphicon-pencil": !_editing}')
|
||||
li(bindonce='user.tags', ng-class='{active: user.filters[tag.id]}', ng-repeat='tag in user.tags')
|
||||
.input-group(ng-show='_editing')
|
||||
input.form-control.input-sm(type='text', ng-model='tag.name')
|
||||
span.input-group-addon
|
||||
a(ng-click='user.ops.deleteTag({params:{id:tag.id}})')
|
||||
span.glyphicon.glyphicon-trash
|
||||
a(ng-hide='_editing', ng-click='toggleFilter(tag)')
|
||||
a(ng-click='saveOrEdit()')
|
||||
span(ng-if='_editing')=env.t('save')
|
||||
span(ng-if='!_editing')=env.t('editTags')
|
||||
li(ng-hide='_editing')
|
||||
a(ng-click='areTagsHidden = !areTagsHidden')
|
||||
span(ng-if='!areTagsHidden')=env.t('hideTags')
|
||||
span(ng-if='areTagsHidden')=env.t('showTags')
|
||||
//- Clear button
|
||||
li(ng-hide='_editing')
|
||||
a(ng-click='user.filters = {}')
|
||||
span=env.t('clearTags')
|
||||
ul(ng-if='!areTagsHidden || _editing')
|
||||
//- Add new tag
|
||||
li.filters-edit(ng-show='_editing', ng-submit='createTag(_newTag)')
|
||||
form.hrpg-input-group
|
||||
input(type='text', ng-model='_newTag', placeholder=env.t('newTag'))
|
||||
button(ng-click='createTag(_newTag)')=env.t('add')
|
||||
li.filters-edit(bindonce='user.tags', ng-class='{active: user.filters[tag.id]}', ng-repeat='tag in user.tags')
|
||||
//- Edit tags
|
||||
form.hrpg-input-group(ng-show='_editing')
|
||||
input(type='text', ng-model='tag.name')
|
||||
button(ng-click='user.ops.deleteTag({params:{id:tag.id}})')
|
||||
span.glyphicon.glyphicon-trash
|
||||
//- List of Tags
|
||||
li.filters-tags(ng-if='!_editing', bindonce='user.tags', ng-class='{active: user.filters[tag.id], challenge: tag.challenge}', ng-repeat='tag in user.tags')
|
||||
a(ng-click='toggleFilter(tag)')
|
||||
span.glyphicon.glyphicon-bullhorn(bo-if="tag.challenge")
|
||||
markdown(ng-model='tag.name')
|
||||
li
|
||||
form.form-inline(ng-show='_editing', ng-submit='createTag(_newTag)')
|
||||
.input-group
|
||||
input.form-control.input-sm(type='text', ng-model='_newTag', placeholder=env.t('newTag'))
|
||||
span.input-group-addon(ng-click='createTag(_newTag)')
|
||||
=env.t('add')
|
||||
// <li class="{#unless activeFilters(users[_userId].filters)}hidden{/}">
|
||||
li
|
||||
a(rel='tooltip', title=env.t('clearFilters'), ng-click='user.filters = {}')
|
||||
span.glyphicon.glyphicon-remove-sign
|
||||
// <li class="{#unless activeFilters(users[_userId].filters)}hidden{/}">
|
||||
Loading…
Reference in a new issue