Merge "Redesign dashboard to reduce clutter"

This commit is contained in:
Zuul 2018-08-21 21:25:37 +00:00 committed by Gerrit Code Review
commit 19697bd7fc
10 changed files with 298 additions and 331 deletions

View File

@ -21,82 +21,72 @@
</div>
<div class="row">
<div class="col-sm-6">
<table class="table table-striped">
<thead>
<th colspan="2">My Boards</th>
</thead>
<tbody>
<tr ng-repeat="board in boards">
<td>
<p>
<a href="#!/board/{{board.id}}">
{{board.title}}
</a>
</p>
<div class="card">
<h3>
<i class="fa fa-sb-board fa-lg text-muted"></i>&emsp;
My Boards
</h3>
<div class="card-row" ng-repeat="board in boards">
<a href="#!/board/{{board.id}}">
{{board.title}}
</a>
<p>
<small ng-repeat="lane in board.lanes"
ng-if="!lane.worklist.archived">
<span class="badge"
ng-class="{'badge-primary': lane.worklist.items.length > 0}">
{{lane.worklist.items.length}}
</span> {{lane.worklist.title}}
&nbsp;
ng-if="!lane.worklist.archived">
<span class="badge"
ng-class="{'badge-primary': lane.worklist.items.length > 0}">
{{lane.worklist.items.length}}
</span> {{lane.worklist.title}}
&nbsp;
</small>
</td>
</tr>
</tbody>
<tbody ng-show="boards.length == 0">
<td colspan="3" class="text-center text-muted">
</p>
</div>
<p ng-show="boards.length == 0"
class="card-row text-center text-muted">
<em>
You don't currently have any boards.
</em>
</td>
</tbody>
<tbody ng-show="loadingBoards">
<td colspan="3" class="text-center">
<i class="fa fa-refresh fa-spin fa-lg"></i>
</td>
</tbody>
</table>
</p>
<p ng-show="loadingBoards"
class="card-row text-center">
<i class="fa fa-spinner fa-spin fa-lg"></i>
</p>
</div>
</div>
<div class="col-sm-6">
<table class="table table-striped">
<thead>
<th colspan="2">My Worklists</th>
</thead>
<tbody>
<tr ng-repeat="worklist in worklists">
<td>
<subscribe class="pull-right"
resource="worklist"
resource-id="worklist.id"
subscriptions="worklistSubscriptions">
</subscribe>
<p>
<a href="#!/worklist/{{worklist.id}}">
{{worklist.title}}
</a>
</p>
<div class="card">
<h3>
<i class="fa fa-sb-worklist fa-lg text-muted"></i>&emsp;
My Worklists
</h3>
<div class="card-row" ng-repeat="worklist in worklists">
<subscribe class="pull-right"
resource="worklist"
resource-id="worklist.id"
subscriptions="worklistSubscriptions">
</subscribe>
<a href="#!/worklist/{{worklist.id}}">
{{worklist.title}}
</a>
<p>
<small>
<span class="badge"
ng-class="{'badge-primary': worklist.items.length > 0}">
{{worklist.items.length}}
</span> Items
<span class="badge"
ng-class="{'badge-primary': worklist.items.length > 0}">
{{worklist.items.length}}
</span> Items
</small>
</td>
</tr>
</tbody>
<tbody ng-show="worklists.length == 0">
<td colspan="3" class="text-center text-muted">
</p>
</div>
<p ng-show="worklists.length == 0"
class="card-row text-center text-muted">
<em>
You don't currently have any worklists.
</em>
</td>
</tbody>
<tbody ng-show="loadingWorklists">
<td colspan="3" class="text-center">
<i class="fa fa-refresh fa-spin fa-lg"></i>
</td>
</tbody>
</table>
</p>
<p ng-show="loadingBoards"
class="card-row text-center">
<i class="fa fa-spinner fa-spin fa-lg"></i>
</p>
</div>
</div>
</div>

View File

@ -7,159 +7,115 @@
<!--recent events block-->
<div class="row">
<div class="col-sm-12">
<table class="table table-striped">
<thead>
<th>
<a href ng-click="collapsedEvents = !collapsedEvents"
ng-hide="subscriptionEvents.length < 1">
<i class="fa"
ng-class="{'fa-caret-down': !collapsedEvents,
'fa-caret-right': collapsedEvents}">
</i>
Recent Events
<span ng-show="subscriptionEvents.length > 0">
({{subscriptionEvents.length}})
</span>
</a>
<span ng-show="subscriptionEvents.length < 1">
Recent Events
<h3>
<a href ng-click="collapsedEvents = !collapsedEvents"
ng-hide="subscriptionEvents.length < 1">
<i class="fa"
ng-class="{'fa-caret-down': !collapsedEvents,
'fa-caret-right': collapsedEvents}">
</i>
Recent Events
<span ng-show="subscriptionEvents.length > 0">
({{subscriptionEvents.length}})
</span>
</th>
<th><button type="button" class="close"
ng-show="subscriptionEvents.length > 0"
ng-click="removeAllEvents()">&times;
</button></th>
</thead>
<tbody ng-show="!collapsedEvents">
<tr ng-repeat="event in subscriptionEvents">
<td subscription-event="{{event}}"></td>
<td>
<button type="button" class="close"
ng-click="removeEvent(event)">
&times;
</button>
</td>
</tr>
</tbody>
<tbody ng-show="subscriptionEvents.length == 0">
<td colspan="2" class="text-center text-muted">
<em>
There are no recent events on your subscriptions.
</em>
</td>
</tbody>
</table>
</a>
<span ng-show="subscriptionEvents.length < 1">
Recent Events
</span>
<span class="pull-right close" ng-if="!collapsedEvents && subscriptionEvents.length > 0">
<i class="fa fa-times" ng-click="removeAllEvents()"></i>
</span>
</h3>
<div class="row bordered" ng-repeat="event in subscriptionEvents"
ng-if="!collapsedEvents">
<p>
<button type="button" class="pull-right close" ng-click="removeEvent(event)">
<i class="fa fa-times"></i>
</button>
</p>
<div subscription-event="{{ event }}"></div>
</div>
<div class="row text-center text-muted"
ng-if="subscriptionEvents.length == 0">
<p>
<em>There are no recent events on your subscriptions.</em>
</p>
</div>
</div>
</div>
<!--end recent events block-->
<div class="row">
<!--stories assigned block-->
<!--tasks assigned block-->
<div class="col-sm-6">
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<th colspan="2">Tasks assigned to me</th>
</thead>
<tbody>
<tr ng-repeat="task in progressTasks">
<td class="col-sm-2">
<task-status-dropdown
editable="{{isLoggedIn}}"
on-change="updateTask(task, 'status', status)"
status="{{task.status}}"
/>
</td>
<td>
<p>
<a href="#!/story/{{task.story_id}}">
{{task.title}}
</a>
</p>
</td>
</tr>
<tr ng-repeat="task in todoTasks">
<td class="col-sm-2">
<task-status-dropdown
editable="{{isLoggedIn}}"
on-change="updateTask(task, 'status', status)"
status="{{task.status}}"
/>
</td>
<td>
<p>
<a href="#!/story/{{task.story_id}}">
{{task.title}}
</a>
</p>
</td>
</tr>
<tr ng-repeat="task in reviewTasks">
<td class="col-sm-2">
<task-status-dropdown
editable="{{isLoggedIn}}"
on-change="updateTask(task, 'status', status)"
status="{{task.status}}"
/>
</td>
<td>
<p>
<a href="#!/story/{{task.story_id}}">
{{task.title}}
</a>
</p>
</td>
</tr>
</tbody>
<tbody ng-show="todoTasks.length == 0 &&
progressTasks.length == 0 &&
reviewTasks.length == 0">
<td colspan="3" class="text-center text-muted">
<div class="card">
<h3>Tasks assigned to me</h3>
<div class="card-row" ng-repeat="task in todoTasks">
<task-status-dropdown
editable="{{isLoggedIn}}"
on-change="updateTask(task, 'status', status)"
status="{{task.status}}">
</task-status-dropdown>&emsp;
<a href="#!/story/{{task.story_id}}">
{{task.title}}
</a>
</div>
<div class="card-row" ng-repeat="task in progressTasks">
<task-status-dropdown
editable="{{isLoggedIn}}"
on-change="updateTask(task, 'status', status)"
status="{{task.status}}">
</task-status-dropdown>&emsp;
<a href="#!/story/{{task.story_id}}">
{{task.title}}
</a>
</div>
<div class="card-row" ng-repeat="task in reviewTasks">
<task-status-dropdown
editable="{{isLoggedIn}}"
on-change="updateTask(task, 'status', status)"
status="{{task.status}}">
</task-status-dropdown>&emsp;
<a href="#!/story/{{task.story_id}}">
{{task.title}}
</a>
</div>
<p class="card-row text-center text-muted"
ng-show="todoTasks.length == 0 &&
progressTasks.length == 0 &&
reviewTasks.length == 0">
<em>
There are no tasks in active stories currently assigned to you.
</em>
</td>
</tbody>
</table>
</p>
</div>
</div>
<!--end stories assigned block-->
<!--end tasks assigned block-->
<!-- stories created block-->
<div class="col-sm-6">
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<th colspan="2">Stories created by me</th>
</thead>
<tbody>
<tr ng-repeat="story in createdStories">
<td class="col-sm-2">
<story-status-label story="story"/>
</td>
<td>
<subscribe class="pull-right"
resource="story"
<div class="card">
<h3>Stories created by me</h3>
<div class="card-row" ng-repeat="story in createdStories">
<span class="pull-right">
<story-status-label story="story"></story-status-label>
&emsp;
<subscribe resource="story"
resource-id="story.id"
subscriptions="storySubscriptions">
</subscribe>
<p>
<a href="#!/story/{{story.id}}">
{{story.title}}
</a>
</p>
<story-task-status story="story"/>
</td>
</tr>
</tbody>
<tbody ng-show="createdStories.length == 0">
<td colspan="3" class="text-center text-muted">
</span>
<a href="#!/story/{{story.id}}">
{{story.title}}
</a>
<p>
<story-task-status story="story"></story-task-status>
</p>
</div>
<p ng-show="createdStories.length == 0"
class="card-row text-center text-muted">
<em>
There are no active stories created by you.
</em>
</td>
</tbody>
</table>
</p>
</div>
</div>
<!-- end stories created block-->

View File

@ -7,7 +7,7 @@
{{ author.full_name }} left a comment: <span class="pull-right"time-moment eventdate="created_at"></span>
</p>
<p>
<em>{{evt.event_info.comment_content || 'The author left a blank comment.'}}
</em></p>
<div class="indented text-muted">
<insert-markdown content="evt.event_info.comment_content"></insert-markdown>
</div>
</div>

View File

@ -19,165 +19,124 @@
<div class="col-xs-12">
<view-title>Subscriptions</view-title>
<h1>
<i class="fa fa-star" ng-if="!saving"></i>
<i class="fa fa-star text-muted"></i>&emsp;
Subscriptions
</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<th colspan="2">
<i class="fa fa-sb-story fa-lg"></i>
<div class="card">
<h3>
<i class="fa fa-sb-story fa-lg text-muted"></i>&emsp;
Stories
</th>
</thead>
<tbody>
<tr ng-repeat="story in stories">
<td class="col-sm-2">
<story-status-label story="story"/>
</td>
<td>
<subscribe class="pull-right"
resource="story"
resource-id="story.id"
subscriptions="storySubscriptions">
</h3>
<div class="card-row" ng-repeat="story in stories">
<span class="pull-right">
<story-status-label story="story"></story-status-label>
&emsp;
<subscribe resource="story"
resource-id="story.id"
subscriptions="storySubscriptions">
</subscribe>
<p>
<a href="#!/story/{{story.id}}">
{{story.title}}
</a>
</p>
<story-task-status story="story"/>
</td>
</tr>
</tbody>
<tbody ng-show="stories.length == 0">
<td colspan="3" class="text-center text-muted">
</span>
<a href="#!/story/{{story.id}}">
{{story.title}}
</a>
<p>
<story-task-status story="story"></story-task-status>
</p>
</div>
<p ng-show="stories.length == 0"
class="card-row text-center text-muted">
<em>
You are not currently subscribed to any stories.
</em>
</td>
</tbody>
</table>
</p>
</div>
</div>
<div class="col-sm-6">
<hr class="visible-xs"/>
<div class= "panel panel-default">
<table class="table table-striped">
<thead>
<th>
<i class="fa fa-sb-project fa-lg"></i>
<div class="card">
<h3>
<i class="fa fa-sb-project fa-lg text-muted"></i>&emsp;
Projects
</th>
</thead>
<tbody>
<tr ng-repeat="project in projects">
<td>
<subscribe class="pull-right"
resource="project"
resource-id="project.id"
subscriptions="projectSubscriptions">
</subscribe>
<p>
<a href="#!/project/{{project.name}}">
{{project.name}}
</a>
</p>
</td>
</tr>
</tbody>
<tbody ng-show="projects.length == 0">
<td colspan="3" class="text-center text-muted">
</h3>
<div class="card-row" ng-repeat="project in projects">
<subscribe class="pull-right"
resource="project"
resource-id="project.id"
subscriptions="projectSubscriptions">
</subscribe>
<p>
<a href="#!/project/{{project.name}}">
{{project.name}}
</a>
</p>
</div>
<p ng-show="projects.length == 0"
class="card-row text-center text-muted">
<em>
You are not currently subscribed to any projects.
</em>
</td>
</tbody>
</table>
</p>
</div>
</div>
<div class="col-sm-6">
<hr class="visible-xs"/>
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<th>
<i class="fa fa-sb-project-group fa-lg"></i>
<div class="card">
<h3>
<i class="fa fa-sb-project-group fa-lg text-muted"></i>&emsp;
Project Groups
</th>
</thead>
<tbody>
<tr ng-repeat="projectGroup in projectGroups">
<td>
<subscribe class="pull-right"
resource="project_group"
resource-id="projectGroup.id"
subscriptions="projectGroupSubscriptions">
</subscribe>
<p>
<a href="#!/project_group/{{projectGroup.id}}">
{{projectGroup.name}}
</a>
</p>
</td>
</tr>
</tbody>
<tbody ng-show="projectGroups.length == 0">
<td colspan="3" class="text-center text-muted">
</h3>
<div class="card-row" ng-repeat="projectGroup in projectGroups">
<subscribe class="pull-right"
resource="project_group"
resource-id="projectGroup.id"
subscriptions="projectGroupSubscriptions">
</subscribe>
<p>
<a href="#!/project_group/{{projectGroup.id}}">
{{projectGroup.name}}
</a>
</p>
</div>
<p ng-show="projectGroups.length == 0"
class="card-row text-center text-muted">
<em>
You are not currently subscribed to any project groups.
</em>
</td>
</tbody>
</table>
</p>
</div>
</div>
<div class="col-sm-6">
<hr class="visible-xs"/>
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<th>
<i class="fa fa-sb-task fa-lg"></i>
<div class="card">
<h3>
<i class="fa fa-sb-worklist fa-lg text-muted"></i>&emsp;
Worklists
</th>
</thead>
<tbody>
<tr ng-repeat="worklist in worklists">
<td>
<subscribe class="pull-right"
resource="worklist"
resource-id="worklist.id"
subscriptions="worklistSubscriptions">
</subscribe>
<p>
<a href="#!/worklist/{{worklist.id}}">
{{worklist.title}}
</a>
</p>
</h3>
<div class="card-row" ng-repeat="worklist in worklists">
<subscribe class="pull-right"
resource="worklist"
resource-id="worklist.id"
subscriptions="worklistSubscriptions">
</subscribe>
<a href="#!/worklist/{{worklist.id}}">
{{ worklist.title }}
</a>
<p>
<small>
<span class="badge"
ng-class="{'badge-primary': worklist.items.length > 0}">
{{worklist.items.length}}
</span> Items
<span class="badge"
ng-class="{'badge-primary': worklist.items.length > 0}">
{{ worklist.items.length }}
</span> Items
</small>
</td>
</tr>
</tbody>
<tbody ng-show="worklists.length == 0">
<tr>
<td colspan="3" class="text-center text-muted">
<em>
You are not currently subscribed to any worklists.
</em>
</td>
</tr>
</tbody>
</table>
</p>
</div>
<p ng-show="worklists.length == 0"
class="card-row text-center text-muted">
<em>
You are not currently subscribed to any worklists.
</em>
</p>
</div>
</div>
</div>

View File

@ -37,6 +37,18 @@ angular.module('sb.util').directive('storyTaskStatus',
$scope.status_texts = statuses;
});
$scope.orderStatus = function(item) {
var order = [
'todo',
'inprogress',
'review',
'invalid',
'merged'
];
return order.indexOf(item.key);
};
}
};
});

View File

@ -1,4 +1,4 @@
<small ng-repeat="task_status in story.task_statuses">
<small ng-repeat="task_status in story.task_statuses | orderBy:orderStatus">
<span class="badge"
ng-class="{'badge-primary': task_status.count > 0}">
{{task_status.count}}

View File

@ -0,0 +1,20 @@
.card {
background-color: #fff;
padding: 30px;
border-radius: 2px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
margin: 30px 0px 0px 0px;
h3:first-of-type {
margin-top: 0px;
font-size: 1.25em;
}
task-status-dropdown {
width: 80px;
}
.card-row {
margin-top: 25px;
}
}

View File

@ -0,0 +1,24 @@
.row.bordered {
border-top: 1px solid #ddd;
padding: 10px;
margin: 0px;
line-height: 1.5em;
background-color: transparent;
overflow: hidden;
&:last-of-type {
border-bottom: 1px solid #ddd;
}
p {
margin: 14px 0px;
button.close {
margin-left: 10px;
}
}
}
.indented {
padding: 0px 15px;
}

View File

@ -22,3 +22,7 @@ p, span, em, strong, small {
white-space: pre-wrap;
}
}
h3 {
font-size: 1.25em;
}

View File

@ -61,3 +61,5 @@ $fa-font-path: '../fonts';
@import 'base/boards_worklists';
@import 'base/calendar';
@import 'base/stories';
@import 'base/cards';
@import 'base/layout';