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 Show 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 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<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">
<rect id="Rectangle-2" fill="#000000" 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>
<rect id="Rectangle-2-Copy" fill="#000000" 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>
<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-3" fill="#000000" sketch:type="MSShapeGroup" x="0" y="11" width="7" height="2"></rect>
<g id="Artboard-1-Copy-3" sketch:type="MSArtboardGroup" fill="#000000">
<rect id="Rectangle-2" sketch:type="MSShapeGroup" x="0" y="3" width="4" height="2"></rect>
<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" sketch:type="MSShapeGroup" x="12" y="11" width="4" height="2"></rect>
<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" sketch:type="MSShapeGroup" x="9" y="3" 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>
</svg>
\ No newline at end of file
h/static/scripts/app-controller.coffee
View file @ 2f101ab2
......@@ -38,7 +38,10 @@ module.exports = class AppController
$scope.isSidebar = $window.top isnt $window
# Default sort
$scope.sort = name: 'Location'
$scope.sort = {
name: 'Location'
options: ['Newest', 'Oldest', 'Location']
}
# Reload the view when the focused group changes or the
# list of groups that the user is a member of changes
......@@ -67,7 +70,11 @@ module.exports = class AppController
if selector.type is 'TextPositionSelector'
return selector.start
return Number.POSITIVE_INFINITY
$scope.sort = {name, predicate}
$scope.sort = {
name,
predicate,
options: $scope.sort.options,
}
$scope.$watch 'auth.user', (newVal, oldVal) ->
return if newVal is oldVal
......
h/static/scripts/directive/sort-dropdown.js
View file @ 2f101ab2
......@@ -2,8 +2,15 @@ module.exports = function () {
return {
restrict: 'E',
scope: {
/** The name of the currently selected sort criteria. */
sortBy: '=',
/** A list of choices that the user can opt to sort by. */
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: '&',
},
templateUrl: 'sort_dropdown.html',
......
h/static/scripts/directive/top-bar.js
View file @ 2f101ab2
......@@ -17,6 +17,9 @@ module.exports = function () {
searchController: '=',
accountDialog: '=',
shareDialog: '=',
sortBy: '=',
sortOptions: '=',
onChangeSortBy: '&',
},
templateUrl: 'top_bar.html',
};
......
h/static/styles/app.scss
View file @ 2f101ab2
......@@ -106,6 +106,7 @@ $group-list-width: 270px;
.group-item {
display: flex;
flex-direction: row;
flex-grow: 1;
padding: 10px;
cursor: pointer;
......@@ -121,6 +122,7 @@ $group-list-width: 270px;
&.selected {
.group-name-link {
font-size: $body2-font-size;
font-weight: 600;
}
}
......@@ -174,6 +176,7 @@ $group-list-width: 270px;
// the label showing the currently selected group which opens
// the drop-down list when clicked
.group-list-label__label {
font-size: $body2-font-size;
font-weight:bold;
}
......
h/static/styles/common.scss
View file @ 2f101ab2
......@@ -178,33 +178,13 @@ html {
position: absolute;
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 {
color: inherit;
display: block;
line-height: 1;
padding: 1em;
white-space: nowrap;
font-size: $body2-font-size;
&:hover {
color: $brand-color;
......@@ -328,6 +308,43 @@ html {
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 {
margin-bottom: 1em;
......
h/static/styles/vendor/fonts/selection.json
View file @ 2f101ab2
......@@ -31,7 +31,9 @@
"icon": {
"paths": [
"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",
"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",
"M0 704h448v128h-448v-128z"
],
......@@ -45,7 +47,7 @@
},
"attrs": [],
"properties": {
"order": 51,
"order": 56,
"id": 1308,
"name": "sort",
"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 @@
</span>
<div class="dropdown-menu__top-arrow"></div>
<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}"
ng-click="groups.focus(group.id)">
<!-- the group icon !-->
......@@ -57,7 +58,7 @@
</div>
</div>
</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-icon-container"><i class="h-icon-add"></i></div>
<div class="group-details">
......
h/templates/client/publish_annotation_btn.html
View file @ 2f101ab2
......@@ -9,7 +9,7 @@
</dropdown-menu-btn>
<div class="publish-annotation-btn__dropdown-container">
<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-icon-container">
<i class="small" ng-class="'h-icon-' + vm.group.type"></i>
......@@ -21,7 +21,7 @@
</div>
</div>
</li>
<li ng-click="vm.setPrivacy('private')">
<li class="dropdown-menu__row" ng-click="vm.setPrivacy('private')">
<div class="group-item">
<div class="group-icon-container">
<i class="small h-icon-lock"></i>
......
h/templates/client/sort_dropdown.html
View file @ 2f101ab2
<span class="ng-cloak" dropdown keyboard-nav>
<span role="button"
data-toggle="dropdown"
dropdown-toggle>
dropdown-toggle
ng-if="!showAsIcon">
Sorted by {{sortBy | lowercase}}
<i class="h-icon-arrow-drop-down"></i>
</span>
<ul class="dropdown-menu pull-right" role="menu">
<li ng-repeat="sortOption in sortOptions"
<button
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})"
><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>
</span>
h/templates/client/top_bar.html
View file @ 2f101ab2
......@@ -30,12 +30,22 @@
{{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i>
</span>
<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><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li>
<li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li>
<li ng-show="authUser"><a class="dropdown-menu__link" href="/stream?q=user:{{account.username}}"
target="_blank">My Annotations</a></li>
<li ng-show="authUser"><a class="dropdown-menu__link" href="" ng-click="onLogout()">Sign out</a></li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link" href="/profile" target="_blank">Account</a>
</li>
<li class="dropdown-menu__row" >
<a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
</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>
</div>
</div>
......@@ -55,6 +65,12 @@
on-search="searchController.update(query)"
on-clear="searchController.clear()"
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"
ng-click="shareDialog.visible = !shareDialog.visible"
ng-if="isSidebar"
......@@ -73,18 +89,25 @@
!--><i class="h-icon-arrow-drop-down top-bar__dropdown-arrow"></i>
</a>
<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">
<a href="/stream?q=user:{{account.username}}"
class="dropdown-menu__link"
title="View all your annotations"
target="_blank">{{account.username}}</a></li>
<li ng-show="authUser"><a href="/profile"
target="_blank"
class="dropdown-menu__link"><!-- nospace
!-->Account settings</a></li>
<li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li>
<li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li>
<li ng-show="authUser"><a class="dropdown-menu__link dropdown-menu__link--subtle"
href="" ng-click="onLogout()">Sign out</a></li>
target="_blank">{{account.username}}</a>
</li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link" href="/profile" target="_blank">Account settings</a>
</li>
<li class="dropdown-menu__row">
<a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a>
</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>
</div>
</div>
......
h/templates/client/viewer.html
View file @ 2f101ab2
......@@ -10,7 +10,7 @@
selection-count="selectedAnnotationsCount"
on-clear-selection="clearSelection()">
</search-status-bar>
<li ng-show="isStream">
<li ng-if="!feature('groups') && isStream">
<sort-dropdown
sort-by="sort.name"
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