Commit df326eef authored by Eduardo's avatar Eduardo

Revert "Added close button to the notebook"

This reverts commit e19983b0.
parent 62557943
...@@ -3,9 +3,6 @@ import { createSidebarConfig } from './config/sidebar'; ...@@ -3,9 +3,6 @@ import { createSidebarConfig } from './config/sidebar';
import { createShadowRoot } from './util/shadow-root'; import { createShadowRoot } from './util/shadow-root';
import { render } from 'preact'; import { render } from 'preact';
// FIXME: use the button from the frontend shared package once this is stable.
import Button from '../sidebar/components/Button';
/** /**
* Create the iframe that will load the notebook application. * Create the iframe that will load the notebook application.
* *
...@@ -36,9 +33,7 @@ export default class Notebook extends Delegator { ...@@ -36,9 +33,7 @@ export default class Notebook extends Delegator {
super(element, config); super(element, config);
this.frame = null; this.frame = null;
/** @type {null|string} */
this._groupId = null; this._groupId = null;
/** @type {null|string} */
this._prevGroupId = null; this._prevGroupId = null;
/** /**
...@@ -61,7 +56,8 @@ export default class Notebook extends Delegator { ...@@ -61,7 +56,8 @@ export default class Notebook extends Delegator {
this._groupId = groupId; this._groupId = groupId;
this.open(); this.open();
}); });
// Defensive programming: if the sidebar has opened, get out of the way this.subscribe('closeNotebook', () => this.close());
// If the sidebar has opened, get out of the way
this.subscribe('sidebarOpened', () => this.close()); this.subscribe('sidebarOpened', () => this.close());
} }
...@@ -110,25 +106,6 @@ export default class Notebook extends Delegator { ...@@ -110,25 +106,6 @@ export default class Notebook extends Delegator {
this.container.className = 'notebook-outer'; this.container.className = 'notebook-outer';
shadowRoot.appendChild(this.container); shadowRoot.appendChild(this.container);
render(
<div className="Notebook__controller-bar">
<Button
icon="cancel"
className="Notebook__close-button"
buttonText="Close"
title="Close the Notebook"
onClick={event => {
// Guest 'component' captures all click events in the host page and opens the sidebar.
// We stop the propagation of the event to prevent the sidebar to be opened.
event.stopPropagation();
this.close();
this.publish('closeNotebook');
}}
/>
</div>,
this.container
);
return this.container; return this.container;
} }
} }
...@@ -213,12 +213,13 @@ export default class Sidebar extends Guest { ...@@ -213,12 +213,13 @@ export default class Sidebar extends Guest {
// Re-publish the crossframe event so that anything extending Delegator // Re-publish the crossframe event so that anything extending Delegator
// can subscribe to it (without need for crossframe) // can subscribe to it (without need for crossframe)
this.crossframe.on('openNotebook', (/** @type {string} */ groupId) => { this.crossframe.on('openNotebook', groupId => {
this.hide(); this.close();
this.publish('openNotebook', [groupId]); this.publish('openNotebook', [groupId]);
}); });
this.subscribe('closeNotebook', () => { this.crossframe.on('closeNotebook', () => {
this.show(); this.open();
this.publish('closeNotebook');
}); });
const eventHandlers = [ const eventHandlers = [
...@@ -446,22 +447,4 @@ export default class Sidebar extends Guest { ...@@ -446,22 +447,4 @@ export default class Sidebar extends Guest {
setAllVisibleHighlights(shouldShowHighlights) { setAllVisibleHighlights(shouldShowHighlights) {
this.crossframe.call('setVisibleHighlights', shouldShowHighlights); this.crossframe.call('setVisibleHighlights', shouldShowHighlights);
} }
/**
* Shows the sidebar's controls
*/
show() {
if (this.frame) {
this.frame.classList.remove('is-hidden');
}
}
/**
* Hides the sidebar's controls
*/
hide() {
if (this.frame) {
this.frame.classList.add('is-hidden');
}
}
} }
...@@ -114,27 +114,22 @@ describe('Notebook', () => { ...@@ -114,27 +114,22 @@ describe('Notebook', () => {
}); });
}); });
describe('responding to user input', () => { describe('responding to events', () => {
it('closes the notebook when close button clicked', () => { it('opens on `openNotebook`', () => {
const notebook = createNotebook(); const notebook = createNotebook();
notebook.open(); notebook.publish('openNotebook');
const button = notebook.container.getElementsByClassName( assert.equal(notebook.container.style.display, '');
'Notebook__close-button'
)[0];
button.click();
assert.equal(notebook.container.style.display, 'none');
}); });
});
describe('responding to events', () => { it('closes on `closeNotebook`', () => {
it('opens on `openNotebook`', () => {
const notebook = createNotebook(); const notebook = createNotebook();
notebook.publish('openNotebook'); notebook.open();
notebook.publish('closeNotebook');
assert.equal(notebook.container.style.display, ''); assert.equal(notebook.container.style.display, 'none');
}); });
it('closes on "sidebarOpened"', () => { it('closes on "sidebarOpened"', () => {
......
...@@ -251,29 +251,29 @@ describe('Sidebar', () => { ...@@ -251,29 +251,29 @@ describe('Sidebar', () => {
assert.called(target); assert.called(target);
})); }));
describe('on "openNotebook" crossframe event', () => { describe('on "openNotebook" event', () => {
it('hides the sidebar', () => { it('hides itself and republishes the event', () => {
const sidebar = createSidebar(); const sidebar = createSidebar();
sinon.stub(sidebar, 'hide').callThrough();
sinon.stub(sidebar, 'publish'); sinon.stub(sidebar, 'publish');
sinon.stub(sidebar, 'close');
emitEvent('openNotebook', 'mygroup'); emitEvent('openNotebook', 'mygroup');
assert.calledWith( assert.calledWith(
sidebar.publish, sidebar.publish,
'openNotebook', 'openNotebook',
sinon.match(['mygroup']) sinon.match(['mygroup'])
); );
assert.calledOnce(sidebar.hide); assert.calledOnce(sidebar.close);
assert.notEqual(sidebar.frame.style.visibility, 'hidden');
}); });
}); });
describe('on "closeNotebook" internal event', () => { describe('on "closeNotebook" event', () => {
it('shows the sidebar', () => { it('opens itself and republishes the event', () => {
const sidebar = createSidebar(); const sidebar = createSidebar();
sinon.stub(sidebar, 'show').callThrough(); sinon.stub(sidebar, 'publish');
sidebar.publish('closeNotebook'); sinon.stub(sidebar, 'open');
assert.calledOnce(sidebar.show); emitEvent('closeNotebook');
assert.equal(sidebar.frame.style.visibility, ''); assert.calledWith(sidebar.publish, 'closeNotebook');
assert.calledOnce(sidebar.open);
}); });
}); });
......
...@@ -47,11 +47,6 @@ ...@@ -47,11 +47,6 @@
user-select: none; user-select: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
&.is-hidden {
visibility: hidden;
transition: visibility var.$annotator-timing--sidebar-collapse-transition;
}
&.annotator-collapsed { &.annotator-collapsed {
margin-left: 0; margin-left: 0;
......
@use '../variables' as var; @use '../variables' as var;
@use '../mixins/molecules'; @use '../mixins/molecules';
@use "../mixins/buttons";
.notebook-outer { .notebook-outer {
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
// This large zIndex is used to bring the notebook to the front, so it is not
// hidden by other elements from the host page. It is the same value used by
// the sidebar
z-index: 2147483647;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
padding: var.$layout-space; padding: var.$layout-space;
// Leave explicitly the right amount of room for closed-sidebar affordances
padding-right: var.$annotator-toolbar-width + 5px;
&.is-open { &.is-open {
// TBD: Actual opacity/overlay we'd like to use // TBD: Actual opacity/overlay we'd like to use
...@@ -27,30 +24,4 @@ ...@@ -27,30 +24,4 @@
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
// FIXME: these properties produce a visual break between the Notebook__controller-bar and the iframe.
// A better approach would be if the Notebook__controller-bar and iframe could be children of notebook-inner.
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
// This container element has the purpose of pushing children to the right side.
.Notebook__controller-bar {
font-size: var.$font-size--large;
display: flex;
justify-content: flex-end;
background-color: var.$grey-2;
padding: var.$layout-space--xsmall;
// FIXME: these properties emulates as if the Notebook__controller-bar would be part of the iframe.
border-top-left-radius: var.$border-radius;
border-top-right-radius: var.$border-radius;
}
.Notebook__close-button {
@include buttons.button--labeled(
$background-color: var.$grey-2,
$active-background-color: var.$grey-3
);
} }
...@@ -24,9 +24,9 @@ ...@@ -24,9 +24,9 @@
// FIXME: Temporary affordance for the Notebook view to override some // FIXME: Temporary affordance for the Notebook view to override some
// layout spacing that assumes the presence of the top bar // layout spacing that assumes the presence of the top bar
&--notebook { &--notebook {
padding: 0 var.$layout-space; padding: var.$layout-space;
@include responsive.respond-to(tablets desktops) { @include responsive.respond-to(tablets desktops) {
padding: 0 var.$layout-space--xlarge; padding: var.$layout-space--xlarge;
} }
} }
} }
......
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