Skip to content

C
coopwire-hypothesis
Unverified Commit 12def07b authored by Robert Knight's avatar Robert Knight Committed by GitHub
Browse files
Options

Merge pull request #2138 from hypothesis/annotator-svg-icons 

Use SVG icons in annotator toolbar
parents af6cb07f b13e835e
Show whitespace changes
Inline Side-by-side
Showing with 56 additions and 30 deletions
src/annotator/components/toolbar.js
View file @ 12def07b
......@@ -2,6 +2,8 @@ import classnames from 'classnames';
import propTypes from 'prop-types';
import { createElement } from 'preact';
import SvgIcon from '../../shared/components/svg-icon';
function ToolbarButton({
buttonRef,
extraClasses,
......@@ -19,15 +21,15 @@ function ToolbarButton({
return (
<button
// This currently uses the icon font. This needs to be converted to
// `SvgIcon`.
className={classnames('annotator-frame-button', extraClasses, icon)}
className={classnames('annotator-frame-button', extraClasses)}
aria-label={label}
aria-pressed={selected}
onClick={handleClick}
ref={buttonRef}
title={label}
/>
>
<SvgIcon name={icon} />
</button>
);
}
......@@ -61,7 +63,7 @@ export default function Toolbar({
<ToolbarButton
extraClasses="annotator-frame-button--sidebar_close"
label="Close annotation sidebar"
icon="h-icon-close"
icon="cancel"
onClick={closeSidebar}
/>
)}
......@@ -74,14 +76,14 @@ export default function Toolbar({
? 'Hide annotation sidebar'
: 'Show annotation sidebar'
}
icon={isSidebarOpen ? 'h-icon-chevron-right' : 'h-icon-chevron-left'}
icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
onClick={toggleSidebar}
/>
)}
{!useMinimalControls && (
<ToolbarButton
label="Show highlights"
icon={showHighlights ? 'h-icon-visibility' : 'h-icon-visibility-off'}
icon={showHighlights ? 'show' : 'hide'}
selected={showHighlights}
onClick={toggleHighlights}
/>
......@@ -91,9 +93,7 @@ export default function Toolbar({
label={
newAnnotationType === 'note' ? 'New page note' : 'New annotation'
}
icon={
newAnnotationType === 'note' ? 'h-icon-note' : 'h-icon-annotate'
}
icon={newAnnotationType === 'note' ? 'note' : 'annotate'}
onClick={createAnnotation}
/>
)}
......
src/annotator/icons.js 0 → 100644
View file @ 12def07b
/**
* Set of icons used by the annotator part of the application via the `SvgIcon`
* component.
*/
export default {
annotate: require('../images/icons/annotate.svg'),
cancel: require('../images/icons/cancel.svg'),
'caret-left': require('../images/icons/caret-left.svg'),
'caret-right': require('../images/icons/caret-right.svg'),
hide: require('../images/icons/hide.svg'),
highlight: require('../images/icons/highlight.svg'),
note: require('../images/icons/note.svg'),
show: require('../images/icons/show.svg'),
};
src/annotator/index.js
View file @ 12def07b
......@@ -12,10 +12,8 @@ if (process.env.NODE_ENV !== 'production') {
// Load icons.
import { registerIcons } from '../shared/components/svg-icon';
registerIcons({
annotate: require('../images/icons/annotate.svg'),
highlight: require('../images/icons/highlight.svg'),
});
import iconSet from './icons';
registerIcons(iconSet);
import configFrom from './config/index';
import Guest from './guest';
......
src/images/icons/caret-left.svg 0 → 100644
View file @ 12def07b
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 12L6 8l4-4"></path></g></svg>
src/images/icons/caret-right.svg
View file @ 12def07b
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">
<path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--caret-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4l4 4-4 4"></path></g></svg>
src/images/icons/collapsed.svg 0 → 100644
View file @ 12def07b
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">
<path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />
</g>
</svg>
src/images/icons/hide.svg 0 → 100644
View file @ 12def07b
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.73 12.973A9.89 9.89 0 0 1 8 13c-3.866 0-7-2.239-7-5 0-.753.233-1.467.65-2.107m5.62-2.866A9.89 9.89 0 0 1 8 3c3.866 0 7 2.239 7 5 0 .753-.233 1.467-.65 2.107M1 1l14 14L1 1z"></path></g></svg>
src/images/icons/note.svg 0 → 100644
View file @ 12def07b
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15h6l8-6V1H1v14zm6-1V9h7"></path></g></svg>
src/images/icons/show.svg 0 → 100644
View file @ 12def07b
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13c3.866 0 7-2.239 7-5s-3.134-5-7-5-7 2.239-7 5 3.134 5 7 5zm0-4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path></g></svg>
src/sidebar/components/thread.js
View file @ 12def07b
......@@ -31,7 +31,7 @@ function Thread({ showDocumentInfo = false, thread, threadsService }) {
// Render a control to expand/collapse the current thread if this thread has
// a parent (i.e. is a reply thread)
const showThreadToggle = !!thread.parent;
const toggleIcon = thread.collapsed ? 'caret-right' : 'expand-menu';
const toggleIcon = thread.collapsed ? 'collapsed' : 'expand-menu';
const toggleTitle = thread.collapsed ? 'Expand replies' : 'Collapse replies';
// If rendering child threads, only render those that have at least one
......
src/sidebar/icons.js
View file @ 12def07b
/**
* Set of icons used by the sidebar application for use with the `SvgIcon`
* Set of icons used by the sidebar application via the `SvgIcon`
* component.
*/
export default {
......@@ -12,6 +12,7 @@ export default {
'cc-std': require('../images/icons/cc-std.svg'),
'cc-zero': require('../images/icons/cc-zero.svg'),
'collapse-menu': require('../images/icons/collapse-menu.svg'),
collapsed: require('../images/icons/collapsed.svg'),
copy: require('../images/icons/copy.svg'),
cursor: require('../images/icons/cursor.svg'),
edit: require('../images/icons/edit.svg'),
......
src/sidebar/test/bootstrap.js
View file @ 12def07b
......@@ -16,6 +16,10 @@ configure({ adapter: new Adapter() });
// Make all the icons that are available for use with `SvgIcon` in the actual
// app available in the tests. This enables validation of icon names passed to
// `SvgIcon`.
import iconSet from '../icons';
import sidebarIcons from '../icons';
import annotatorIcons from '../../annotator/icons';
import { registerIcons } from '../../shared/components/svg-icon';
registerIcons(iconSet);
registerIcons({
...sidebarIcons,
...annotatorIcons,
});
src/styles/annotator/annotator.scss
View file @ 12def07b
......@@ -103,12 +103,11 @@ $sidebar-collapse-transition-time: 150ms;
background: var.$white;
border: solid 1px var.$grey-3;
border-radius: 4px;
color: var.$grey-semi;
color: var.$grey-5;
text-decoration: none;
height: 30px;
width: 30px;
padding: 0;
font-size: 16px;
margin-bottom: 5px;
&:active {
......@@ -117,7 +116,7 @@ $sidebar-collapse-transition-time: 150ms;
&:focus,
&:hover {
color: var.$text-color;
color: var.$grey-7;
}
}
......@@ -129,6 +128,7 @@ $sidebar-collapse-transition-time: 150ms;
width: 36px;
margin-bottom: 10px;
height: var.$top-bar-height;
color: var.$grey-semi;
}
.annotator-frame-button--sidebar_close {
......
src/styles/mixins/buttons.scss
View file @ 12def07b
......@@ -25,7 +25,7 @@
&:hover {
transition: 0.2s ease-out;
color: var.$grey-6;
color: var.$grey-7;
}
&.is-active {
......
src/styles/sidebar/components/menu.scss
View file @ 12def07b
......@@ -19,6 +19,10 @@
display: block;
height: 100%;
align-items: center;
&:hover {
transition: 0.2s ease-out;
color: var.$grey-7;
}
}
.menu__toggle-wrapper {
......
src/styles/sidebar/components/top-bar.scss
View file @ 12def07b
......@@ -21,10 +21,10 @@
&__icon-button,
&__menu-icon {
&.is-active {
color: var.$grey-6;
color: var.$grey-7;
&:hover {
color: var.$grey-6;
color: var.$grey-7;
}
}
}
......
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