Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

Small ux adjustments #206

Merged
merged 2 commits into from
Mar 16, 2017
Merged

Small ux adjustments #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c55cfa
disable the list filter to hide visual bugs
Mar 16, 2017
4c9ccb2
adjust the layout of the filter buttons
Mar 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions www/src/js/components/deck-styler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ module.exports = React.createClass({

return (
<div className="col-1 u-hidden--small">
<div className={deckClass}>
<div className={deckClass} style={{float: 'right'}}>
<span
className="p-view-filters__icon"
onClick={this.gridClicked}>
Expand All @@ -41,11 +41,11 @@ module.exports = React.createClass({
dangerouslySetInnerHTML={{__html:
'<defs><rect id="path-1" y="0" x="0" height="9" width="9"/><rect id="path-3" y="0" x="0" height="9" width="9"/><rect id="path-5" y="0" x="0" height="9" width="9"/><rect id="path-7" y="0" x="0" height="9" width="9"/></defs><g id="Page-1" fill-rule="evenodd" fill="none"><g id="grid-view-unselected"><g id="Group-2"><g id="Rectangle-Clipped"><mask id="mask-2" fill="white"><use xlink:href="#path-1"/></mask><g id="Rectangle" stroke="#979797" stroke-width="2" mask="url(#mask-2)"><rect id="path-1" y="0" x="0" height="9" width="9"/></g></g><g id="Rectangle-Copy-Clipped" transform="translate(12)"><mask id="mask-4" fill="white"><use xlink:href="#path-3"/></mask><g id="Rectangle-Copy" stroke="#979797" stroke-width="2" mask="url(#mask-4)"><rect id="path-3" y="0" x="0" height="9" width="9"/></g></g><g id="Rectangle-Copy-3-Clipped" transform="translate(0 12)"><mask id="mask-6" fill="white"><use xlink:href="#path-5"/></mask><g id="Rectangle-Copy-3" stroke="#979797" stroke-width="2" mask="url(#mask-6)"><rect id="path-5" y="0" x="0" height="9" width="9"/></g></g><g id="Rectangle-Copy-2-Clipped" transform="translate(12 12)"><mask id="mask-8" fill="white"><use xlink:href="#path-7"/></mask><g id="Rectangle-Copy-2" stroke="#979797" stroke-width="2" mask="url(#mask-8)"><rect id="path-7" y="0" x="0" height="9" width="9"/></g></g></g></g></g>'}}
/>
</span>
</span>
<span
className="p-view-filters__icon"
onClick={this.rowClicked}>
<svg
className="p-view-filters__icon"
style={{opacity: 0.4, pointerEvents: 'none'}}>
<svg
className="filter-icon-row--active"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
Expand All @@ -66,7 +66,7 @@ module.exports = React.createClass({
dangerouslySetInnerHTML={{__html:
'<defs><path id="a" d="M0 0h5v5H0z"/><path id="c" d="M0 0h5v5H0z"/><path id="e" d="M0 0h5v5H0z"/></defs><g fill-rule="evenodd" fill="none"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M0 0h5v5H0z" stroke="#888" stroke-width="2" mask="url(#b)"/><path stroke="#888" d="M8 3h15"/><path stroke="#888" d="M8 10h15"/><path stroke="#888" d="M8 17h15"/><g transform="translate(0 14)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M0 0h5v5H0z" stroke="#888" stroke-width="2" mask="url(#d)"/></g><g transform="translate(0 7)"><mask id="f" fill="#fff"><use xlink:href="#e"/></mask><path d="M0 0h5v5H0z" stroke="#888" stroke-width="2" mask="url(#f)"/></g></g>'}}
/>
</span>
</span>
</div>
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions www/src/js/templates/search-bar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@
</form>
</div>
<div class="col-1 u-hidden--small">
<div id="js-view-filters" class="p-view-filters p-view-filters--grid">
<div id="js-view-filters" class="p-view-filters p-view-filters--grid" style="float: right">
<span id="js-style-grid" class="p-view-filters__icon">
<svg class="filter-icon-grid--active" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="21" width="21"><defs><path id="a" d="M0 0h9v9H0z"/><path id="c" d="M0 0h9v9H0z"/><path id="e" d="M0 0h9v9H0z"/><path id="g" d="M0 0h9v9H0z"/></defs><g fill-rule="evenodd" fill="none"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M0 0h9v9H0z" stroke="#333" stroke-width="2" mask="url(#b)"/><g transform="translate(12)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M0 0h9v9H0z" stroke="#333" stroke-width="2" mask="url(#d)"/></g><g transform="translate(0 12)"><mask id="f" fill="#fff"><use xlink:href="#e"/></mask><path d="M0 0h9v9H0z" stroke="#333" stroke-width="2" mask="url(#f)"/></g><g transform="translate(12 12)"><mask id="h" fill="#fff"><use xlink:href="#g"/></mask><path d="M0 0h9v9H0z" stroke="#333" stroke-width="2" mask="url(#h)"/></g></g></svg>
<svg class="filter-icon-grid--inactive" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="21px" width="21px" version="1.1" viewBox="0 0 21 21"><defs><rect id="path-1" y="0" x="0" height="9" width="9"/><rect id="path-3" y="0" x="0" height="9" width="9"/><rect id="path-5" y="0" x="0" height="9" width="9"/><rect id="path-7" y="0" x="0" height="9" width="9"/></defs><g id="Page-1" fill-rule="evenodd" fill="none"><g id="grid-view-unselected"><g id="Group-2"><g id="Rectangle-Clipped"><mask id="mask-2" fill="white"><use xlink:href="#path-1"/></mask><g id="Rectangle" stroke="#979797" stroke-width="2" mask="url(#mask-2)"><rect id="path-1" y="0" x="0" height="9" width="9"/></g></g><g id="Rectangle-Copy-Clipped" transform="translate(12)"><mask id="mask-4" fill="white"><use xlink:href="#path-3"/></mask><g id="Rectangle-Copy" stroke="#979797" stroke-width="2" mask="url(#mask-4)"><rect id="path-3" y="0" x="0" height="9" width="9"/></g></g><g id="Rectangle-Copy-3-Clipped" transform="translate(0 12)"><mask id="mask-6" fill="white"><use xlink:href="#path-5"/></mask><g id="Rectangle-Copy-3" stroke="#979797" stroke-width="2" mask="url(#mask-6)"><rect id="path-5" y="0" x="0" height="9" width="9"/></g></g><g id="Rectangle-Copy-2-Clipped" transform="translate(12 12)"><mask id="mask-8" fill="white"><use xlink:href="#path-7"/></mask><g id="Rectangle-Copy-2" stroke="#979797" stroke-width="2" mask="url(#mask-8)"><rect id="path-7" y="0" x="0" height="9" width="9"/></g></g></g></g></g></svg>
</span>
<span id="js-style-row" class="p-view-filters__icon">
<!-- disable the list filter because of visual bugs -->
<span id="js-style-row" class="p-view-filters__icon" style="opacity: 0.4; pointer-events: none">
<svg class="filter-icon-row--active" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="19px" width="23px" version="1.1" viewBox="0 0 23 19"><defs><rect id="path-1" y="0" x="0" height="5" width="5"/><rect id="path-3" y="0" x="0" height="5" width="5"/><rect id="path-5" y="0" x="0" height="5" width="5"/></defs><g id="Page-1" fill-rule="evenodd" fill="none"><g id="list-view-selected"><g id="Group"><g id="Rectangle-Clipped"><mask id="mask-2" fill="white"><use xlink:href="#path-1"/></mask><g id="Rectangle" stroke="#333" stroke-width="2" mask="url(#mask-2)"><rect id="path-1" y="0" x="0" height="5" width="5"/></g></g><path id="Line" stroke="#333" d="m8 3h15"/><path id="Line-Copy" stroke="#333" d="m8 10h15"/><path id="Line-Copy-2" stroke="#333" d="m8 17h15"/><g id="Rectangle-Copy-Clipped" transform="translate(0 14)"><mask id="mask-4" fill="white"><use xlink:href="#path-3"/></mask><g id="Rectangle-Copy" stroke="#333" stroke-width="2" mask="url(#mask-4)"><rect id="path-3" y="0" x="0" height="5" width="5"/></g></g><g id="Rectangle-Copy-2-Clipped" transform="translate(0 7)"><mask id="mask-6" fill="white"><use xlink:href="#path-5"/></mask><g id="Rectangle-Copy-2" stroke="#333" stroke-width="2" mask="url(#mask-6)"><rect id="path-5" y="0" x="0" height="5" width="5"/></g></g></g></g></g></svg>
<svg class="filter-icon-row--inactive" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="19" width="23"><defs><path id="a" d="M0 0h5v5H0z"/><path id="c" d="M0 0h5v5H0z"/><path id="e" d="M0 0h5v5H0z"/></defs><g fill-rule="evenodd" fill="none"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M0 0h5v5H0z" stroke="#888" stroke-width="2" mask="url(#b)"/><path stroke="#888" d="M8 3h15"/><path stroke="#888" d="M8 10h15"/><path stroke="#888" d="M8 17h15"/><g transform="translate(0 14)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M0 0h5v5H0z" stroke="#888" stroke-width="2" mask="url(#d)"/></g><g transform="translate(0 7)"><mask id="f" fill="#fff"><use xlink:href="#e"/></mask><path d="M0 0h5v5H0z" stroke="#888" stroke-width="2" mask="url(#f)"/></g></g></svg>
</span>
Expand Down