opendev
/
storyboard-webclient
Code Issues Proposed changes

Put task notes in a box 

This distinguishes task notes from other elements visually, so they're
a little easier to scan. It also aligns the 'add notes' and
'edit'(notes) buttons, so that the user is not confused, as they will
expect these to be in the same place. Finally, it puts them both nearer
the task notes, so that it's obvious what the edit button edits.

Change-Id: I152a8dc164c9173b52f25b000eb65af9a1b7c57f
This commit is contained in:
Zara 2016-09-20 11:52:29 +00:00
parent d6ecab337d
commit 2e8c5af997
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/stories/template/detail.html
View File

@ -503,8 +503,14 @@
</button>
</div>
</div>
<div class="row" ng-show="showDetail">
<div class="col-xs-10 col-xs-offset-1">
<div class="row"ng-show="showDetail">
<div class="col-xs-10 col-xs-offset-1 task-notes"
ng-show="isLoggedIn">
<button class="btn btn-primary btn-xs pull-right"
ng-show="!task.editing && task.link && isLoggedIn"
ng-click="editNotes(task)">
<i class="fa fa-pencil"></i> Edit
</button>
<insert-markdown content="task.link" ng-show="!task.editing"></insert-markdown>
<insert-markdown content="task.tempNotes" ng-show="task.editing && notesPreview"></insert-markdown>
<form name="taskNotesForm" ng-show="task.editing">
@ -513,14 +519,13 @@
class="form-control context-edit"
msd-elastic
rows="3"
ng-show="isLoggedIn"
ng-disabled="isUpdating"
ng-model="task.tempNotes">
</textarea>
</div>
<div class="clearfix">
<button type="button" ng-show="isLoggedIn"
<button type="button"
class="btn btn-default" ng-click="notesPreview = !notesPreview">
Toggle Preview
</button>
@ -528,7 +533,7 @@
<div class="btn" ng-show="isUpdating">
<i class="fa fa-spinner fa-lg fa-spin"></i>
</div>
<button type="button" ng-show="isLoggedIn"
<button type="button"
class="btn btn-primary"
ng-click="updateTask(task, 'link', task.tempNotes);
cancelEditNotes(task)"
@ -543,19 +548,17 @@
</div>
</div>
</form>
<div class="row text-center" ng-show="!task.editing && !task.link && isLoggedIn">
<div class="row pull-right" ng-show="!task.editing && !task.link">
<button class="btn btn-primary btn-xs"
ng-click="editNotes(task)">
<i class="fa fa-pencil"></i> Add notes
</button>
</div>
</div>
<div class="col-xs-1" ng-show="!task.editing && task.link">
<button class="btn btn-primary btn-xs"
ng-show="isLoggedIn"
ng-click="editNotes(task)">
<i class="fa fa-pencil"></i> Edit
</button>
<div class="col-xs-10 col-xs-offset-1 task-notes"
ng-show="!isLoggedIn && task.link">
<insert-markdown content="task.link" ng-show="!task.editing"></insert-markdown>
<insert-markdown content="task.tempNotes" ng-show="task.editing && notesPreview"></insert-markdown>
</div>
</div>
</td>

10
src/theme/base/edit_tasks.less
View File

@ -30,6 +30,16 @@
}
}
.task-notes {
padding-top : 10px;
border-radius: 5px;
box-shadow: -4px 0px 10px rgba(0,0,0,0.1);
}
.row {
padding-bottom : 10px;
}
input-inline, project-typeahead, user-typeahead, task-status-dropdown {
display: inline-block;