diff --git a/app/controllers/editor.js b/app/controllers/editor.js index 34eb9c574f..fa7b6060e4 100644 --- a/app/controllers/editor.js +++ b/app/controllers/editor.js @@ -94,6 +94,7 @@ export default Controller.extend({ /* public properties -----------------------------------------------------*/ + infoMessage: null, leaveEditorTransition: null, shouldFocusEditor: false, showDeletePostModal: false, @@ -512,12 +513,6 @@ export default Controller.extend({ let postIsMarkdownCompatible = post.isCompatibleWithMarkdownEditor(); if (koenigEnabled || !postIsMarkdownCompatible) { this.set('useKoenig', true); - - // display an alert if koenig is disabled but we use it anyway - // because the post is incompatible with the markdown editor - if (!koenigEnabled) { - alert('This post will be opened with the Koenig editor because it\'s not compatible with the markdown editor'); - } } else { this.set('useKoenig', false); } @@ -534,6 +529,12 @@ export default Controller.extend({ this.set('post', post); + // display an info message if Koenig is disabled by we had to use it + // for post compatibility + if (!koenigEnabled && this.useKoenig) { + // this.set('infoMessage', 'This post can only be edited with the Koenig editor.'); + } + // autofocus the editor if we have a new post this.set('shouldFocusEditor', post.get('isNew')); @@ -629,6 +630,7 @@ export default Controller.extend({ this.set('hasDirtyAttributes', false); this.set('shouldFocusEditor', false); this.set('leaveEditorTransition', null); + this.set('infoMessage', null); // remove the onbeforeunload handler as it's only relevant whilst on // the editor route diff --git a/app/styles/components/settings-menu.css b/app/styles/components/settings-menu.css index 2a6d96eebf..811209dfe0 100644 --- a/app/styles/components/settings-menu.css +++ b/app/styles/components/settings-menu.css @@ -239,3 +239,10 @@ .mobile-menu-expanded .content-cover { transform: translate3d(205px, 0px, 0px); } + + +/* Badges +/* ---------------------------------------------------------- */ +.gh-setting-title .gh-badge { + font-size: 13px; +} diff --git a/app/styles/layouts/editor.css b/app/styles/layouts/editor.css index 53bea4fbed..e63423c0f8 100644 --- a/app/styles/layouts/editor.css +++ b/app/styles/layouts/editor.css @@ -64,7 +64,7 @@ position: relative; z-index: 1000; display: inline-block; - padding: 15px 0 15px 15px; + padding: 10px; color: var(--midgrey); line-height: 0; transition: all 0.15s ease-out 0s; @@ -286,11 +286,15 @@ right: 0; left: 0; display: flex; + flex-wrap: wrap; justify-content: space-between; align-items: center; - height: 80px; - padding: 0 30px; + height: 36px; + padding: 0; + margin: 24px; + z-index: 799; } + @media (max-width: 750px) { .gh-editor-header { padding: 0 4vw; @@ -304,6 +308,8 @@ padding-left: 15px; border-bottom: var(--lightgrey) 1px solid; background-color: #fff; + margin: 0; + border-radius: 0; } .gh-editor-header-small .gh-publishmenu { @@ -314,6 +320,15 @@ padding: 13px 15px; } +.gh-editor-header-small .gh-koenig-info { + position: absolute; + top: 60px; + left: 0; + right: 0; + margin: 0 auto; + padding: 0 8px; +} + .gh-editor-status { color: var(--midgrey); font-size: 1.3rem; diff --git a/app/styles/layouts/main.css b/app/styles/layouts/main.css index 1daf69749e..bdee767903 100644 --- a/app/styles/layouts/main.css +++ b/app/styles/layouts/main.css @@ -347,9 +347,9 @@ .gh-menu-toggle { display: block; position: absolute; - top: 25px; + top: 24px; right: -8px; - height: 34px; + height: 36px; width: 25px; border: color-mod(var(--lightgrey) l(+4%)) 5px solid; border-radius: 4px; @@ -638,10 +638,6 @@ align-items: center; } -.view-actions .gh-btn { - margin-left: 8px; -} - .view-container, .view-content { position: relative; diff --git a/app/templates/editor.hbs b/app/templates/editor.hbs index 49889adc83..5980ef4b72 100644 --- a/app/templates/editor.hbs +++ b/app/templates/editor.hbs @@ -5,19 +5,34 @@ navIsClosed=navIsClosed as |editor| }} -
-
- {{gh-editor-post-status - post=post - isSaving=(or autosave.isRunning saveTasks.isRunning) - }} +
+
+
+ {{gh-editor-post-status + post=post + isSaving=(or autosave.isRunning saveTasks.isRunning) + }} +
+ {{#gh-scheduled-post-countdown post=post as |post countdown|}} + + {{/gh-scheduled-post-countdown}} +
+ + {{#if infoMessage}} +
+
+ {{svg-jar "idea" class="w7 h7 fill-blue"}} +

+ {{infoMessage}} + +

+
- {{#gh-scheduled-post-countdown post=post as |post countdown|}} - - {{/gh-scheduled-post-countdown}} -
+ {{/if}} + +
{{#unless post.isNew}} {{#if session.user.isContributor}} {{gh-task-button "Save" diff --git a/app/templates/settings/labs.hbs b/app/templates/settings/labs.hbs index 6e4d12bc53..41482e891a 100644 --- a/app/templates/settings/labs.hbs +++ b/app/templates/settings/labs.hbs @@ -82,6 +82,15 @@
Beta features
+
+
+
Koenig editor New
+
Participate in our new rich text editor beta! We’d love your feedback
+
+
+
{{gh-feature-flag "koenigEditor"}}
+
+
Public API
@@ -155,19 +164,6 @@ {{/gh-uploader}}
-
⚠️ Developer-only Feature Testing ⚠️
-
-
-
Koenig Editor
-
- Highly experimental (i.e. broken) editor. For developer use only.
- Warning: Stories created or edited with Koenig will no longer be compatible with the old markdown editor.
-
-
-
{{gh-feature-flag "koenigEditor"}}
-
-
-