Skip to content

C
coopwire-hypothesis
Commit 2f101ab2 authored by Nick Stenning's avatar Nick Stenning
Browse files
Options

Merge pull request #2643 from hypothesis/t91-sort_dropdown_move_to_top_bar 

Move sort dropdown to top bar
parents 58b87a2b a7275737
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 59 deletions
h/static/images/icons/filter.svg
View file @ 2f101ab2
...@@ -5,13 +5,13 @@ ...@@ -5,13 +5,13 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Artboard-1-Copy-3" sketch:type="MSArtboardGroup"> <g id="Artboard-1-Copy-3" sketch:type="MSArtboardGroup" fill="#000000">
<rect id="Rectangle-2" fill="#000000" sketch:type="MSShapeGroup" x="0" y="3" width="4" height="2"></rect> <rect id="Rectangle-2" sketch:type="MSShapeGroup" x="0" y="3" width="4" height="2"></rect>
<circle id="Oval-3" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup" cx="6" cy="4" r="4"></circle> <path d="M6,6 L6,6 C7.1045695,6 8,5.1045695 8,4 C8,2.8954305 7.1045695,2 6,2 C4.8954305,2 4,2.8954305 4,4 C4,5.1045695 4.8954305,6 6,6 L6,6 Z M6,8 L6,8 C3.790861,8 2,6.209139 2,4 C2,1.790861 3.790861,0 6,0 C8.209139,0 10,1.790861 10,4 C10,6.209139 8.209139,8 6,8 L6,8 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-2-Copy" fill="#000000" sketch:type="MSShapeGroup" x="12" y="11" width="4" height="2"></rect> <rect id="Rectangle-2-Copy" sketch:type="MSShapeGroup" x="12" y="11" width="4" height="2"></rect>
<circle id="Oval-3-Copy" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup" cx="10" cy="12" r="4"></circle> <path d="M10,14 L10,14 C11.1045695,14 12,13.1045695 12,12 C12,10.8954305 11.1045695,10 10,10 C8.8954305,10 8,10.8954305 8,12 C8,13.1045695 8.8954305,14 10,14 L10,14 Z M10,16 L10,16 C7.790861,16 6,14.209139 6,12 C6,9.790861 7.790861,8 10,8 C12.209139,8 14,9.790861 14,12 C14,14.209139 12.209139,16 10,16 L10,16 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-2-Copy-2" fill="#000000" sketch:type="MSShapeGroup" x="9" y="3" width="7" height="2"></rect> <rect id="Rectangle-2-Copy-2" sketch:type="MSShapeGroup" x="9" y="3" width="7" height="2"></rect>
<rect id="Rectangle-2-Copy-3" fill="#000000" sketch:type="MSShapeGroup" x="0" y="11" width="7" height="2"></rect> <rect id="Rectangle-2-Copy-3" sketch:type="MSShapeGroup" x="0" y="11" width="7" height="2"></rect>
</g> </g>
</g> </g>
</svg> </svg>
\ No newline at end of file
h/static/scripts/app-controller.coffee
View file @ 2f101ab2
...@@ -38,7 +38,10 @@ module.exports = class AppController ...@@ -38,7 +38,10 @@ module.exports = class AppController
$scope.isSidebar = $window.top isnt $window $scope.isSidebar = $window.top isnt $window
# Default sort # Default sort
$scope.sort = name: 'Location' $scope.sort = {
name: 'Location'
options: ['Newest', 'Oldest', 'Location']
}
# Reload the view when the focused group changes or the # Reload the view when the focused group changes or the
# list of groups that the user is a member of changes # list of groups that the user is a member of changes
...@@ -67,7 +70,11 @@ module.exports = class AppController ...@@ -67,7 +70,11 @@ module.exports = class AppController
if selector.type is 'TextPositionSelector' if selector.type is 'TextPositionSelector'
return selector.start return selector.start
return Number.POSITIVE_INFINITY return Number.POSITIVE_INFINITY
$scope.sort = {name, predicate} $scope.sort = {
name,
predicate,
options: $scope.sort.options,
}
$scope.$watch 'auth.user', (newVal, oldVal) -> $scope.$watch 'auth.user', (newVal, oldVal) ->
return if newVal is oldVal return if newVal is oldVal
......
h/static/scripts/directive/sort-dropdown.js
View file @ 2f101ab2
...@@ -2,8 +2,15 @@ module.exports = function () { ...@@ -2,8 +2,15 @@ module.exports = function () {
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
/** The name of the currently selected sort criteria. */
sortBy: '=', sortBy: '=',
/** A list of choices that the user can opt to sort by. */
sortOptions: '=', sortOptions: '=',
/** If true, the menu uses just an icon, otherwise
* it displays 'Sorted by {{sortBy}}'
*/
showAsIcon: '=',
/** Called when the user changes the current sort criteria. */
onChangeSortBy: '&', onChangeSortBy: '&',
}, },
templateUrl: 'sort_dropdown.html', templateUrl: 'sort_dropdown.html',
......
h/static/scripts/directive/top-bar.js
View file @ 2f101ab2
...@@ -17,6 +17,9 @@ module.exports = function () { ...@@ -17,6 +17,9 @@ module.exports = function () {
searchController: '=', searchController: '=',
accountDialog: '=', accountDialog: '=',
shareDialog: '=', shareDialog: '=',
sortBy: '=',
sortOptions: '=',
onChangeSortBy: '&',
}, },
templateUrl: 'top_bar.html', templateUrl: 'top_bar.html',
}; };
......
h/static/styles/app.scss
View file @ 2f101ab2
...@@ -106,6 +106,7 @@ $group-list-width: 270px; ...@@ -106,6 +106,7 @@ $group-list-width: 270px;
.group-item { .group-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
...@@ -121,6 +122,7 @@ $group-list-width: 270px; ...@@ -121,6 +122,7 @@ $group-list-width: 270px;
&.selected { &.selected {
.group-name-link { .group-name-link {
font-size: $body2-font-size;
font-weight: 600; font-weight: 600;
} }
} }
...@@ -174,6 +176,7 @@ $group-list-width: 270px; ...@@ -174,6 +176,7 @@ $group-list-width: 270px;
// the label showing the currently selected group which opens // the label showing the currently selected group which opens
// the drop-down list when clicked // the drop-down list when clicked
.group-list-label__label { .group-list-label__label {
font-size: $body2-font-size;
font-weight:bold; font-weight:bold;
} }
......
h/static/styles/common.scss
View file @ 2f101ab2
...@@ -178,33 +178,13 @@ html { ...@@ -178,33 +178,13 @@ html {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
li:not(.ng-hide) {
text-align: left;
&.inactive {
font-weight: 400;
color: $gray-lighter;
cursor: default;
&:hover {
color: $gray-lighter;
}
& * {
cursor: default;
}
}
& + li {
border-top: dotted 1px $gray-lighter;
}
}
&__link { &__link {
color: inherit; color: inherit;
display: block; display: block;
line-height: 1; line-height: 1;
padding: 1em;
white-space: nowrap; white-space: nowrap;
font-size: $body2-font-size;
&:hover { &:hover {
color: $brand-color; color: $brand-color;
...@@ -328,6 +308,43 @@ html { ...@@ -328,6 +308,43 @@ html {
visibility: visible; visibility: visible;
} }
// Row in a dropdown menu
.dropdown-menu__row {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 8px;
padding-right: 16px;
min-height: 40px;
min-width: 120px;
&:not(:first-child) {
border-top: dotted 1px $gray-lighter;
}
}
.dropdown-menu__row--unpadded {
padding-left: 0px;
padding-right: 0px;
}
// Radio button in a dropdown menu
.dropdown-menu-radio {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
margin-right: 8px;
border: 1px solid $color-silver;
}
.dropdown-menu-radio.is-selected {
border: 4px solid $color-dove-gray;
}
.masthead { .masthead {
margin-bottom: 1em; margin-bottom: 1em;
......
h/static/styles/vendor/fonts/selection.json
View file @ 2f101ab2
...@@ -31,7 +31,9 @@ ...@@ -31,7 +31,9 @@
"icon": { "icon": {
"paths": [ "paths": [
"M0 192h256v128h-256v-128z", "M0 192h256v128h-256v-128z",
"M384 384v0c70.692 0 128-57.308 128-128s-57.308-128-128-128c-70.692 0-128 57.308-128 128s57.308 128 128 128v0zM384 512v0c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256s-114.615 256-256 256v0z",
"M768 704h256v128h-256v-128z", "M768 704h256v128h-256v-128z",
"M640 896v0c70.692 0 128-57.308 128-128s-57.308-128-128-128c-70.692 0-128 57.308-128 128s57.308 128 128 128v0zM640 1024v0c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256s-114.615 256-256 256v0z",
"M576 192h448v128h-448v-128z", "M576 192h448v128h-448v-128z",
"M0 704h448v128h-448v-128z" "M0 704h448v128h-448v-128z"
], ],
...@@ -45,7 +47,7 @@ ...@@ -45,7 +47,7 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 51, "order": 56,
"id": 1308, "id": 1308,
"name": "sort", "name": "sort",
"prevSize": 24, "prevSize": 24,
......
h/static/styles/vendor/icomoon.css
View file @ 2f101ab2
This diff is collapsed.
h/templates/client/group_list.html
View file @ 2f101ab2
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
</span> </span>
<div class="dropdown-menu__top-arrow"></div> <div class="dropdown-menu__top-arrow"></div>
<ul class="dropdown-menu pull-none" role="menu"> <ul class="dropdown-menu pull-none" role="menu">
<li ng-repeat="group in groups.all()"> <li class="dropdown-menu__row dropdown-menu__row--unpadded "
ng-repeat="group in groups.all()">
<div ng-class="{'group-item': true, selected: group.id == groups.focused().id}" <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
ng-click="groups.focus(group.id)"> ng-click="groups.focus(group.id)">
<!-- the group icon !--> <!-- the group icon !-->
...@@ -57,7 +58,7 @@ ...@@ -57,7 +58,7 @@
</div> </div>
</div> </div>
</li> </li>
<li class="new-group-btn"> <li class="dropdown-menu__row dropdown-menu__row--unpadded new-group-btn">
<div class="group-item" ng-click="createNewGroup()"> <div class="group-item" ng-click="createNewGroup()">
<div class="group-icon-container"><i class="h-icon-add"></i></div> <div class="group-icon-container"><i class="h-icon-add"></i></div>
<div class="group-details"> <div class="group-details">
......
h/templates/client/publish_annotation_btn.html
View file @ 2f101ab2
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</dropdown-menu-btn> </dropdown-menu-btn>
<div class="publish-annotation-btn__dropdown-container"> <div class="publish-annotation-btn__dropdown-container">
<ul class="dropdown-menu pull-center group-list publish-annotation-btn__dropdown-menu" role="menu"> <ul class="dropdown-menu pull-center group-list publish-annotation-btn__dropdown-menu" role="menu">
<li ng-click="vm.setPrivacy('shared')"> <li class="dropdown-menu__row" ng-click="vm.setPrivacy('shared')">
<div class="group-item"> <div class="group-item">
<div class="group-icon-container"> <div class="group-icon-container">
<i class="small" ng-class="'h-icon-' + vm.group.type"></i> <i class="small" ng-class="'h-icon-' + vm.group.type"></i>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
</li> </li>
<li ng-click="vm.setPrivacy('private')"> <li class="dropdown-menu__row" ng-click="vm.setPrivacy('private')">
<div class="group-item"> <div class="group-item">
<div class="group-icon-container"> <div class="group-icon-container">
<i class="small h-icon-lock"></i> <i class="small h-icon-lock"></i>
......
h/templates/client/sort_dropdown.html
View file @ 2f101ab2
<span class="ng-cloak" dropdown keyboard-nav> <span class="ng-cloak" dropdown keyboard-nav>
<span role="button" <span role="button"
data-toggle="dropdown" data-toggle="dropdown"
dropdown-toggle> dropdown-toggle
ng-if="!showAsIcon">
Sorted by {{sortBy | lowercase}} Sorted by {{sortBy | lowercase}}
<i class="h-icon-arrow-drop-down"></i> <i class="h-icon-arrow-drop-down"></i>
</span> </span>
<ul class="dropdown-menu pull-right" role="menu"> <button
<li ng-repeat="sortOption in sortOptions" type="button"
class="top-bar__btn"
ng-if="showAsIcon"
dropdown-toggle
title="Sort by {{sortBy}}">
<i class="h-icon-sort"></i>
</button>
<div class="dropdown-menu__top-arrow"></div>
<ul class="dropdown-menu"
ng-class="showAsIcon ? 'pull-right' : 'pull-none'" role="menu">
<li class="dropdown-menu__row"
ng-repeat="sortOption in sortOptions"
ng-click="onChangeSortBy({sortBy: sortOption})" ng-click="onChangeSortBy({sortBy: sortOption})"
><a class="dropdown-menu__link" href="">{{sortOption}}</a></li> ><span class="dropdown-menu-radio"
ng-class="{'is-selected' : sortOption === sortBy}"
></span><a class="dropdown-menu__link" href="">{{sortOption}}</a></li>
</ul> </ul>
</span> </span>
h/templates/client/top_bar.html
View file @ 2f101ab2
...@@ -30,12 +30,22 @@ ...@@ -30,12 +30,22 @@
{{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i> {{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i>
</span> </span>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li ng-show="authUser"><a class="dropdown-menu__link" href="/profile" target="_blank">Account</a></li> <li class="dropdown-menu__row" ng-show="authUser">
<li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li> <a class="dropdown-menu__link" href="/profile" target="_blank">Account</a>
<li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li> </li>
<li ng-show="authUser"><a class="dropdown-menu__link" href="/stream?q=user:{{account.username}}" <li class="dropdown-menu__row" >
target="_blank">My Annotations</a></li> <a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
<li ng-show="authUser"><a class="dropdown-menu__link" href="" ng-click="onLogout()">Sign out</a></li> </li>
<li class="dropdown-menu__row" >
<a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a>
</li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link" href="/stream?q=user:{{account.username}}"
target="_blank">My Annotations</a>
</li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link" href="" ng-click="onLogout()">Sign out</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -55,6 +65,12 @@ ...@@ -55,6 +65,12 @@
on-search="searchController.update(query)" on-search="searchController.update(query)"
on-clear="searchController.clear()" on-clear="searchController.clear()"
title="Filter the annotation list"></simple-search> title="Filter the annotation list"></simple-search>
<sort-dropdown
sort-options="sortOptions"
sort-by="sortBy"
show-as-icon="true"
on-change-sort-by="onChangeSortBy({sortBy: sortBy})">
</sort-dropdown>
<a class="top-bar__btn" <a class="top-bar__btn"
ng-click="shareDialog.visible = !shareDialog.visible" ng-click="shareDialog.visible = !shareDialog.visible"
ng-if="isSidebar" ng-if="isSidebar"
...@@ -73,18 +89,25 @@ ...@@ -73,18 +89,25 @@
!--><i class="h-icon-arrow-drop-down top-bar__dropdown-arrow"></i> !--><i class="h-icon-arrow-drop-down top-bar__dropdown-arrow"></i>
</a> </a>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li ng-show="authUser"><a href="/stream?q=user:{{account.username}}" <li class="dropdown-menu__row" ng-show="authUser">
class="dropdown-menu__link" <a href="/stream?q=user:{{account.username}}"
title="View all your annotations" class="dropdown-menu__link"
target="_blank">{{account.username}}</a></li> title="View all your annotations"
<li ng-show="authUser"><a href="/profile" target="_blank">{{account.username}}</a>
target="_blank" </li>
class="dropdown-menu__link"><!-- nospace <li class="dropdown-menu__row" ng-show="authUser">
!-->Account settings</a></li> <a class="dropdown-menu__link" href="/profile" target="_blank">Account settings</a>
<li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li> </li>
<li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li> <li class="dropdown-menu__row">
<li ng-show="authUser"><a class="dropdown-menu__link dropdown-menu__link--subtle" <a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a>
href="" ng-click="onLogout()">Sign out</a></li> </li>
<li class="dropdown-menu__row">
<a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
</li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link dropdown-menu__link--subtle"
href="" ng-click="onLogout()">Sign out</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
h/templates/client/viewer.html
View file @ 2f101ab2
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
selection-count="selectedAnnotationsCount" selection-count="selectedAnnotationsCount"
on-clear-selection="clearSelection()"> on-clear-selection="clearSelection()">
</search-status-bar> </search-status-bar>
<li ng-show="isStream"> <li ng-if="!feature('groups') && isStream">
<sort-dropdown <sort-dropdown
sort-by="sort.name" sort-by="sort.name"
sort-options="sortOptions" sort-options="sortOptions"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment