Circled close button icon in light mode

This commit is contained in:
benweet 2018-04-16 01:22:29 +01:00
parent a6d07e1cad
commit 28165e662b
7 changed files with 32 additions and 22 deletions

View File

@ -6,9 +6,27 @@
https://stackedit.io/ https://stackedit.io/
### NEW!!! Integrate StackEdit in any website! ### NEW!!! Embed StackEdit in any website!
See https://benweet.github.io/stackedit.js/ See https://github.com/benweet/stackedit.js
Chrome extension: https://chrome.google.com/webstore/detail/ajehldoplanpchfokmeempkekhnhmoha
### Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm start
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
### StackEdit can: ### StackEdit can:
@ -32,20 +50,4 @@ See https://benweet.github.io/stackedit.js/
- Online synchronization using Google Drive, Dropbox and GitHub - Online synchronization using Google Drive, Dropbox and GitHub
- One click publish to Blogger, Dropbox, Gist, GitHub, Google Drive, WordPress, Zendesk - One click publish to Blogger, Dropbox, Gist, GitHub, Google Drive, WordPress, Zendesk
### Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm start
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
> **NOTE:** This page has been written and published with [StackEdit](https://stackedit.io/ "StackEdit"). > **NOTE:** This page has been written and published with [StackEdit](https://stackedit.io/ "StackEdit").

View File

@ -2,7 +2,7 @@
<nav class="navigation-bar" :class="{'navigation-bar--editor': styles.showEditor && !revisionContent, 'navigation-bar--light': light}"> <nav class="navigation-bar" :class="{'navigation-bar--editor': styles.showEditor && !revisionContent, 'navigation-bar--light': light}">
<!-- Explorer --> <!-- Explorer -->
<div class="navigation-bar__inner navigation-bar__inner--left navigation-bar__inner--button"> <div class="navigation-bar__inner navigation-bar__inner--left navigation-bar__inner--button">
<button class="navigation-bar__button button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-close></icon-close></button> <button class="navigation-bar__button button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-close-circle></icon-close-circle></button>
<button class="navigation-bar__button button" v-else tour-step-anchor="explorer" @click="toggleExplorer()" v-title="'Toggle explorer'"><icon-folder></icon-folder></button> <button class="navigation-bar__button button" v-else tour-step-anchor="explorer" @click="toggleExplorer()" v-title="'Toggle explorer'"><icon-folder></icon-folder></button>
</div> </div>
<!-- Side bar --> <!-- Side bar -->

View File

@ -39,7 +39,7 @@
</div> </div>
<div class="tour-step__inner" v-else-if="step === 'end'"> <div class="tour-step__inner" v-else-if="step === 'end'">
<h2>Enjoy!</h2> <h2>Enjoy!</h2>
<p>If you like StackEdit, please rate 5 stars on the <a target="_blank" href="https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg/reviews">Chrome Web Store</a>.</p> <p>If you like StackEdit, please rate 5 stars on the <a target="_blank" href="https://chrome.google.com/webstore/detail/iiooodelglhkcpgbajoejffhijaclcdg/reviews">Chrome Web Store</a>.</p>
<p>You can also star the project on <a target="_blank" href="https://github.com/benweet/stackedit">GitHub</a> and join the <a target="_blank" href="https://community.stackedit.io/">community</a>.</p> <p>You can also star the project on <a target="_blank" href="https://github.com/benweet/stackedit">GitHub</a> and join the <a target="_blank" href="https://community.stackedit.io/">community</a>.</p>
<div class="tour-step__button-bar"> <div class="tour-step__button-bar">
<button class="button" @click="finish">Ok</button> <button class="button" @click="finish">Ok</button>

View File

@ -8,7 +8,7 @@
<br> <br>
<a target="_blank" href="https://github.com/benweet/stackedit/issues">Issue tracker</a> <a target="_blank" href="https://github.com/benweet/stackedit/blob/master/CHANGELOG.md">Changelog</a> <a target="_blank" href="https://github.com/benweet/stackedit/issues">Issue tracker</a> <a target="_blank" href="https://github.com/benweet/stackedit/blob/master/CHANGELOG.md">Changelog</a>
<br> <br>
<a target="_blank" href="https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg">Chrome app</a> thanks for your review! <a target="_blank" href="https://chrome.google.com/webstore/detail/iiooodelglhkcpgbajoejffhijaclcdg">Chrome app</a> <a target="_blank" href="https://chrome.google.com/webstore/detail/ajehldoplanpchfokmeempkekhnhmoha">Chrome extension</a>
<br> <br>
StackEdit on <a target="_blank" href="https://twitter.com/stackedit/">Twitter</a> StackEdit on <a target="_blank" href="https://twitter.com/stackedit/">Twitter</a>
<br> <br>

View File

@ -0,0 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
<path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
</svg>
</template>

View File

@ -49,6 +49,7 @@ import History from './History';
import Database from './Database'; import Database from './Database';
import Magnify from './Magnify'; import Magnify from './Magnify';
import FormatListChecks from './FormatListChecks'; import FormatListChecks from './FormatListChecks';
import CloseCircle from './CloseCircle';
Vue.component('iconProvider', Provider); Vue.component('iconProvider', Provider);
Vue.component('iconFormatBold', FormatBold); Vue.component('iconFormatBold', FormatBold);
@ -100,3 +101,4 @@ Vue.component('iconHistory', History);
Vue.component('iconDatabase', Database); Vue.component('iconDatabase', Database);
Vue.component('iconMagnify', Magnify); Vue.component('iconMagnify', Magnify);
Vue.component('iconFormatListChecks', FormatListChecks); Vue.component('iconFormatListChecks', FormatListChecks);
Vue.component('iconCloseCircle', CloseCircle);

View File

@ -11,7 +11,8 @@ const contentProperties = utils.queryParams.contentProperties;
export default { export default {
setReady() { setReady() {
if (origin && window.parent) { if (origin && window.parent) {
window.parent.postMessage({ type: 'ready' }, origin); // Wait for the editor to init
setTimeout(() => window.parent.postMessage({ type: 'ready' }, origin), 1);
} }
}, },
closed: false, closed: false,