taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Search Table layout

stable
Xavier Julián 2015-12-11 10:20:18 +01:00 committed by David Barragán Merino
parent ceb9cbbe3f
commit 098b989141
4 changed files with 68 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/coffee/modules/search.coffee
View File

@ -174,7 +174,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
linkTable = ($scope, $el, $attrs, $ctrl) -> linkTable = ($scope, $el, $attrs, $ctrl) ->
applyAutoTab = true applyAutoTab = true
activeSectionName = "userstories" activeSectionName = "userstories"
tabsDom = $el.find("section.search-filter") tabsDom = $el.find(".search-filter")
lastSearchResults = null lastSearchResults = null
getActiveSection = (data) -> getActiveSection = (data) ->
@ -197,7 +197,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
maxVal = value.length maxVal = value.length
selectedSection.name = name selectedSection.name = name
selectedSection.value = value selectedSection.value = value
break; break
if maxVal == 0 if maxVal == 0
return selectedSection return selectedSection
@ -206,7 +206,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
renderFilterTabs = (data) -> renderFilterTabs = (data) ->
for name, value of data for name, value of data
continue if name == "count" tabsDom.find("li.#{name}").show()
tabsDom.find("li.#{name} .num").html(value.length) tabsDom.find("li.#{name} .num").html(value.length)
markSectionTabActive = (section) -> markSectionTabActive = (section) ->

60
app/partials/includes/modules/search-filter.jade
View File

@ -1,30 +1,36 @@
section.search-filter ul.search-filter
ul li.userstories(data-name="userstories")
li.userstories(data-name="userstories") a.active(
a.active(href="#") href="#"
span.icon.icon-bulk title="{{ 'SEARCH.FILTER_USER_STORIES' | translate }}"
span.num 0 )
span.name(translate="SEARCH.FILTER_USER_STORIES") span.icon.icon-bulk
span.num
span.name(translate="SEARCH.FILTER_USER_STORIES")
li.issues(data-name="issues") li.issues(data-name="issues")
a(href="#") a(
span.icon.icon-issues href="#"
span.num 0 title="{{ 'SEARCH.FILTER_ISSUES' | translate }}"
span.name(translate="SEARCH.FILTER_ISSUES") )
span.icon.icon-issues
span.num
span.name(translate="SEARCH.FILTER_ISSUES")
li.tasks(data-name="tasks") li.tasks(data-name="tasks")
a(href="#") a(
span.icon.icon-bulk href="#"
span.num 0 title="{{ 'SEARCH.FILTER_TASKS' | translate }}"
span.name(translate="SEARCH.FILTER_TASKS") )
span.icon.icon-bulk
span.num
span.name(translate="SEARCH.FILTER_TASKS")
li.wikipages(data-name="wikipages") li.wikipages(data-name="wikipages")
a(href="#") a(
span.icon.icon-wiki href="#"
span.num 0 title="{{ 'SEARCH.FILTER_WIKI' | translate }}"
span.name(translate="SEARCH.FILTER_WIKI") )
span.icon.icon-wiki
//- li span.num
//- a(href="#") span.name(translate="SEARCH.FILTER_WIKI")
//- span.icon.icon-edit
//- | 3 Users

45
app/styles/modules/search/search-filter.scss
View File

@ -1,26 +1,33 @@
.search-filter { .search-filter {
ul { border-top: 1px solid $whitish;
border-bottom: 3px solid $gray-light; display: flex;
display: flex; margin-bottom: 0;
padding-bottom: .5rem; z-index: 9;
}
li {
margin-right: 1rem;
}
a { a {
@extend %large; background: $white;
@extend %title; color: $gray-light;
opacity: .2; display: inline-block;
margin-right: 1rem;
padding: 1rem 1.25rem;
&:hover { &:hover {
color: $gray; transition: color .3s linear;
opacity: 1; .icon {
transition: opacity .3s linear; margin-right: .4rem;
}
.name {
padding-left: 5px;
}
}
&.active {
border-left: 1px solid $whitish;
border-right: 1px solid $whitish;
color: $grayer;
position: relative;
top: 1px;
.icon {
color: $primary-light;
}
} }
}
.active {
color: $gray;
opacity: 1;
transition: opacity .3s linear;
} }
.icon { .icon {
margin-right: .4rem; margin-right: .4rem;

11
app/styles/modules/search/search-result-table.scss
View File

@ -1,14 +1,11 @@
.search-result-table { .search-result-table {
border-top: 1px solid $whitish;
.row { .row {
align-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .5rem; padding: .5rem;
&:hover {
background: lighten($primary, 60%);
transition: background .2s ease-in;
}
.ref { .ref {
flex-basis: 30px; flex-basis: 30px;
flex-grow: 1; flex-grow: 1;
@ -83,6 +80,10 @@
} }
} }
.search-result-table-header {
@extend %bold;
}
.empty-search-results { .empty-search-results {
margin-top: 4rem; margin-top: 4rem;
text-align: center; text-align: center;