opendev/storyboard-webclient
Code Issues Proposed changes

Redesign dashboard to reduce clutter

Browse Source 
This commit attempts to make the dashboard feel less "busy" and
cluttered by replacing a number of the borders with whitespace to
give a similar effect.

Change-Id: I9f6d240b4471089dec38dda9df2300f5d25eef15
This commit is contained in:
Adam Coldrick 2018-03-03 00:44:24 +00:00
parent ae7451faa8
commit 4829272965
10 changed files with 298 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/dashboard/template/boards_worklists.html
View File

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

148
src/app/dashboard/template/dashboard.html
View File

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

6
src/app/dashboard/template/event/user_comment.html
View File

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

133
src/app/dashboard/template/subscriptions.html
View File

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

12
src/app/util/directive/story_task_status.js
View File

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

2
src/app/util/template/story_task_status.html
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" <span class="badge"
ng-class="{'badge-primary': task_status.count > 0}"> ng-class="{'badge-primary': task_status.count > 0}">
{{task_status.count}} {{task_status.count}}

20
src/theme/base/_cards.scss Normal file
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;
}
}

24
src/theme/base/_layout.scss Normal file
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;
}

4
src/theme/base/_typography.scss
View File

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

2
src/theme/main.scss
View File

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