Skip to content
This repository was archived by the owner on Jan 6, 2023. It is now read-only.

Export as HTML #695

Merged
merged 10 commits into from
Feb 16, 2018
Merged

Export as HTML #695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
10143ba
Export as HTML.
Feb 16, 2018
c8e1fe8
Use the menu even if we are not logged in.
Feb 16, 2018
2736ad8
Add the dots menu even when not logged in.
Feb 16, 2018
d79bab3
Merge branch 'master' into export-as-html
Natim Feb 16, 2018
4ce60dc
Fix linter.
Feb 16, 2018
5c5084c
Listen to content updates and export a nice HTML file.
Feb 16, 2018
f059ae1
Display the disable sync menu as soon as we are not in the savingLayo…
Feb 16, 2018
462adf5
Ignore change check.
Feb 16, 2018
d957b18
Fix the syncing-indicator going over the menu.
Feb 16, 2018
f0c087b
Fix tests.
Feb 16, 2018
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
2 changes: 2 additions & 0 deletions locales/en-US/notes.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,3 +112,5 @@ darkThemeTitle=Dark
# the text to Firefox Notes. Keep "Notes" in English, since it's the name of the
# add-on.
sendToNotes=Send to Notes

exportAsHTML=Export as HTML…
Copy link
Contributor

@vladikoff vladikoff Feb 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@flodolo is this okay?

1 change: 1 addition & 0 deletions src/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
}]
},
"permissions": [
"downloads",
"contextMenus",
"storage",
"identity",
Expand Down
42 changes: 31 additions & 11 deletions src/sidebar/app/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React from 'react';
import classNames from 'classnames';

import SyncIcon from './icons/SyncIcon';
import FeedbackIcon from './icons/FeedbackIcon';

import { formatFooterTime } from '../utils';
import { SURVEY_PATH } from '../constants';
import INITIAL_CONTENT from './editor/data/initialContent';


const STATES = {
SAVING: {
Expand Down Expand Up @@ -53,6 +54,7 @@ class Footer extends React.Component {
this.state = {
isAuthenticated: false,
lastModified: Date.now(),
content: INITIAL_CONTENT,
isKintoLoaded: false,
state: {}
};
Expand Down Expand Up @@ -85,6 +87,7 @@ class Footer extends React.Component {
// Switch to Date.now() to show when we pulled notes instead of 'eventData.last_modified'
this.setState({
lastModified: Date.now(),
content: eventData.data || INITIAL_CONTENT,
isKintoLoaded: true
});

Expand Down Expand Up @@ -112,7 +115,8 @@ class Footer extends React.Component {
case 'text-synced':
// Enable sync-action
this.setState({
lastModified: eventData.last_modified
lastModified: eventData.last_modified,
content: eventData.content || INITIAL_CONTENT
});
this.getLastSyncedTime();
break;
Expand All @@ -135,6 +139,7 @@ class Footer extends React.Component {
});
break;
case 'disconnected':
clearTimeout(this.loginTimeout);
this.setState({
isAuthenticated: false
});
Expand All @@ -151,6 +156,19 @@ class Footer extends React.Component {
}
};

this.exportAsHTML = () => {
const notesContent = this.state.content;
const exportedFileName = 'notes.html';
const exportFileType = 'text/html';

const data = new Blob([`<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Notes</title></head><body>${notesContent}</body></html>`], {'type': exportFileType});
const exportFilePath = window.URL.createObjectURL(data);
browser.downloads.download({
url: exportFilePath,
filename: exportedFileName
});
};

this.disconnectFromSync = () => {
this.setState({
state: STATES.DISCONNECTED
Expand Down Expand Up @@ -262,28 +280,30 @@ class Footer extends React.Component {
{this.rightText}
</button>
</div>
<a id="give-feedback-button"
title={browser.i18n.getMessage('feedback')}
onClick={ this.giveFeedbackCallback }
href={ this.surveyPath }>
<FeedbackIcon />
</a>
<div className="wrapper">
<button id="context-menu-button"
className="mdl-js-button" />
<ul
className="mdl-menu mdl-menu--top-right mdl-js-menu context-menu"
data-mdl-for="context-menu-button">
<li>
<button className="mdl-menu__item context-menu-item"
style={{ width: '100%' }}
onClick={ this.exportAsHTML }>
{ browser.i18n.getMessage('exportAsHTML') }
</button>
</li> {
!this.state.state.savingLayout && !this.state.state.ignoreChange ?
<li>
<button
className="mdl-menu__item context-menu-item"
style={{ width: '100%' }}
onClick={() => this.disconnectFromSync()}
onClick={ this.disconnectFromSync }
>
{browser.i18n.getMessage('disableSync')}
</button>
</li>
<li>
</li> : null
}<li>
<a className="mdl-menu__item context-menu-item"
title={browser.i18n.getMessage('feedback')}
onClick={ this.giveFeedbackCallback }
Expand Down
54 changes: 4 additions & 50 deletions src/sidebar/static/scss/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ footer {
transition: padding 0s 0.2s;

p {
width: 100%;
width: calc(100% - 35px);
text-overflow: ellipsis;
overflow: hidden;
padding-right: 6px;
Expand Down Expand Up @@ -93,6 +93,7 @@ footer {
bottom: 0px;
width: 40px;
border-left: 1px solid #d7d7db;
border-right: 1px solid #d7d7db;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -110,7 +111,7 @@ footer {
transition: opacity .1s, visibility 0s .2s;
}
#enable-sync {
margin-right: 0px;
margin-right: 32px;
transition: margin var(--sync-animation-duration)
cubic-bezier(0.07, 0.95, 0, 1) 0.05s,
border 0s cubic-bezier(0.07, 0.95, 0, 1) var(--sync-animation-duration);
Expand Down Expand Up @@ -153,7 +154,7 @@ footer {
}

#syncing-indicator {
width: 100%;
width: calc(100% - 25px);
text-overflow: ellipsis;
overflow: hidden;
margin-top: 1px;
Expand Down Expand Up @@ -202,36 +203,6 @@ footer {
fill: black !important;
}

/* Feedback button on right side */
#give-feedback-button {
cursor: pointer;
border-left: 1px solid #d7d7db;
display: flex;
flex: 0 0 40px;
justify-content: center;
align-items: center;
}

/* Display feedback button with opacity */
.savingLayout #give-feedback-button {
opacity: 1;
z-index: 1;
visibility: visible;
transition: opacity var(--sync-animation-duration)
cubic-bezier(0.07, 0.95, 0, 1) var(--sync-animation-duration);
}

/* Hide Feedback button with opacity */
.syncingLayout #give-feedback-button {
opacity: 0;
z-index: 0;
cursor: default;
visibility: hidden;
transition: opacity var(--sync-animation-duration)
cubic-bezier(0.07, 0.95, 0, 1),
visibility 0s var(--sync-animation-duration);
}

#footer-buttons button,
#footer-buttons a {
transition: background 50ms;
Expand Down Expand Up @@ -274,23 +245,6 @@ footer {
background-color: rgba(128, 128, 128, 0.2) !important;
}

/* Hide select menu on saving mode */
.savingLayout #context-menu-button {
z-index: 0;
opacity: 0;
visibility: none;
transition: opacity var(--sync-animation-duration) cubic-bezier(0.07, 0.95, 0, 1),
visibility 0s var(--sync-animation-duration);
}

/* Show select menu on syncing mode */
.syncingLayout #context-menu-button {
z-index: 1;
opacity: 1;
visibility: visible;
transition: opacity var(--sync-animation-duration) cubic-bezier(0.07, 0.95, 0, 1) var(--sync-animation-duration);
}

.context-menu {
font-family: inherit;
padding: 0;
Expand Down