tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues Releases Wiki Activity

🎨 fully fix Code Injection styles (#723)

Browse source 
closes https://github.com/TryGhost/Ghost/issues/8504

- allow `.settings-code-editor` to inherit from `.gh-input` - fixes border colours
- change `gh-cm-editor`'s "focused" class from `.focused` to `.focus` so it can inherit `.gh-input` styles
- add lazy loading of CM styles back in `gh-cm-editor` but prevent `lib/codemirror.css` from being compiled into the codemirror styles so that we get the theme colours without causing conflicts with the main editor
This commit is contained in:
Kevin Ansfield 2017-06-01 22:01:43 +01:00 committed by Katharina Irrgang
parent 9c3177b2d0
commit 590006af89
4 changed files with 8 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/components/gh-cm-editor.js
View file

@ -8,7 +8,7 @@ import {assign} from 'ember-platform';
import {bind, once, scheduleOnce} from 'ember-runloop';
const CmEditorComponent = Component.extend(InvokeActionMixin, {
classNameBindings: ['isFocused:focused'],
classNameBindings: ['isFocused:focus'],
_value: boundOneWay('value'), // make sure a value exists
isFocused: false,
@ -29,9 +29,7 @@ const CmEditorComponent = Component.extend(InvokeActionMixin, {
let loader = this.get('lazyLoader');
RSVP.all([
// NOTE: no need to load the styles because we're already pulling
// them in via SimpleMDE and it causes conflicts with the editor
// loader.loadStyle('codemirror', 'assets/codemirror/codemirror.css'),
loader.loadStyle('codemirror', 'assets/codemirror/codemirror.css'),
loader.loadScript('codemirror', 'assets/codemirror/codemirror.js')
]).then(() => {
scheduleOnce('afterRender', this, function () {

10
app/styles/layouts/settings.css
View file

@ -267,17 +267,7 @@
max-width: 680px;
width: 100%;
height: auto;
border: 1px solid #e0dfd7;
border-radius: var(--border-radius);
line-height: 22px;
transition: border-color 0.15s linear;
-webkit-appearance: none;
}
.settings-code-editor.focused {
outline: 0;
border-color: color(var(--lightgrey) l(-15%) s(-10%));
}
.settings-code-editor .CodeMirror {

2
ember-cli-build.js
View file

@ -19,7 +19,7 @@ assetLocation = function (fileName) {
codemirrorAssets = function () {
let codemirrorFiles = [
'lib/codemirror.css',
// 'lib/codemirror.css',
'theme/xq-light.css',
'lib/codemirror.js',
'mode/htmlmixed/htmlmixed.js',

10
tests/integration/components/gh-cm-editor-test.js
View file

@ -37,7 +37,7 @@ describe('Integration: Component: gh-cm-editor', function () {
let onFocus = () => {
// wait for runloop to finish so that the new class has been rendered
wait().then(() => {
expect($(find('.gh-input')).hasClass('focused'), 'has focused class on first render with autofocus')
expect($(find('.gh-input')).hasClass('focus'), 'has focused class on first render with autofocus')
.to.be.true;
done();
@ -58,16 +58,16 @@ describe('Integration: Component: gh-cm-editor', function () {
this.set('text', '');
this.render(hbs`{{gh-cm-editor text class="gh-input" update=(action (mut text))}}`);
expect($(find('.gh-input')).hasClass('focused')).to.be.false;
expect($(find('.gh-input')).hasClass('focus')).to.be.false;
await click('textarea');
await triggerEvent('textarea', 'focus');
expect($(find('.gh-input')).hasClass('focused')).to.be.true;
expect($(find('.gh-input')).hasClass('focus')).to.be.true;
await triggerEvent('textarea', 'blur');
expect($(find('.gh-input')).hasClass('focused')).to.be.false;
expect($(find('.gh-input')).hasClass('focus')).to.be.false;
});
it('can autofocus', function (done) {
@ -77,7 +77,7 @@ describe('Integration: Component: gh-cm-editor', function () {
let onFocus = () => {
// wait for runloop to finish so that the new class has been rendered
wait().then(() => {
expect(this.$('.gh-input').hasClass('focused'), 'has focused class on first render with autofocus')
expect(this.$('.gh-input').hasClass('focus'), 'has focused class on first render with autofocus')
.to.be.true;
done();