Commit Graph

79 Commits

Author SHA1 Message Date
Kevin Ansfield
581b195e12 Truncated long card menu labels 2020-10-27 14:48:39 +00:00
Peter Zimon
02387ab50a Refined editor post title styles
no issue.
- fixed editor post title placeholder font-weight
- fixed spacing between editor post title and first paragraph/card
2019-11-27 13:36:12 +00:00
Peter Zimon
de0ea09416 🎨 Refreshed Koenig styles
no issue.

- updated basic typographic style of Koenig to match better with Casper 3.0
- fixed vertical spacings of paragraphs and lists
- changed color of code text to make it more theme agnostic
- refined Koenig mobile typography
2019-10-31 14:21:18 +01:00
Rishabh Garg
7543d23e3d Added bookmark card and integrated it as fallback for unknown embeds (#1293)
requires https://github.com/TryGhost/Ghost/pull/11024

With the bookmark card you can present links in a much richer format, similar to Twitter cards. If the URL points to a page with right meta information it can show the page title, excerpt, author, publisher and even a preview image.

Bookmark cards can be created in two ways:

1. pasting a link as the first thing in blank paragraph - we'll check to see if we can create an embed, if we can't then we'll create a bookmark card instead
2. manually selecting the bookmark card from the (+) menu or by typing "/bookmark<kbd>Enter</kbd>" or "/bookmark {url}<kbd>Enter</kbd>" for short (you might want to do this if you want the bookmark version instead of a full embed)

Pressing <kbd>Ctrl/Cmd+Z</kbd> after pasting will convert the bookmark card back to a link if that's preferred, alternatively a URL can be pasted with <kbd>Ctrl/Cmd+Shift+V</kbd> to avoid any automatic transformation to an embed/bookmark.

---

- adds "bookmark" card that functions similarly to the embed card
- if the oembed API request returns `type: "bookmark"` then the metadata is used to create a bookmark card
2019-08-27 15:10:31 +01:00
Zimo
ca1644afc0 Night shift visual refinements
no refs.

- fixed visual bugs with buttons
- fixed background color of the SEO preview in night shift
2019-06-21 14:20:37 +02:00
Peter Zimon
c51bce7358 🎨 Updated admin area design and usability (#1232)
refs. https://github.com/TryGhost/Team/issues/205

Major update to Ghost Admin UI including:
- improved general consistency (typography, colors and contrast, UI components, icons)
- new design for post and pages lists, improved discoverability of filters 
- search moved to modal
- account menu is decoupled from ghost logo
- further usability fixes
2019-06-18 11:47:20 +01:00
Peter Zimon
605b89a0d2 Left navigation menu update (#1102)
refs. [d6c22df](d6c22df6d7)

- added icons for members and pages
- improved view site link visibility
- added view site to logo dropdown
- updated all navigation and logo menu icons
- rename 'team' to 'staff'
- lots of design refinement and update (colors, shadows)
2019-02-22 16:43:35 +07:00
Kevin Ansfield
064e3373f2 Fixed ability to type in markdown cards
no issue
- `visibility: hidden` resulted in the textarea not receiving events which breaks CodeMirror
2019-01-22 11:34:24 +00:00
Kevin Ansfield
893a010a4f Lazy-load SimpleMDE dependency in MD card (reduces main bundle by 260KB)
no issue
- use broccoli-funnel to avoid polluting the `dist/` dir with unused build artefacts
- load codemirror and simplemde CSS up-front to avoid duplicate styles and specificity problems
- pull simplemde dependency out into a separate JS file and lazy-load in `{{gh-simplemde}}` component to reduce main bundle size. Before/after:
  - `vendor.min.js 3.58 MB (795.88 KB gzipped)`
  - `vendor.min.js 3.32 MB (710.66 KB gzipped)`
2019-01-21 16:06:25 +00:00
Zimo
c24d9b6718 Removing "Cantarell" font from font stack
refs. https://github.com/TryGhost/Ghost/issues/9824
2018-09-17 11:46:27 +02:00
Zimo
a7e9697eac Koenig - Minor design refinements
refs https://github.com/TryGhost/Ghost/issues/9724
- fixed Card menu plus icon's rounded edges
- decreased link toolbar appearance delay
- changing 'H'/'h' toolbar mapping to 'H2'/'H3' and harmonized title font size
2018-08-14 14:35:13 +01:00
Kevin Ansfield
dbed1b5a86 🎨 Koenig - Hide sidebar when editing (#1030)
refs https://github.com/TryGhost/Ghost/issues/9724
- when Koenig is active, toggle `ui.isFullscreen` when entering/leaving the editor route
- add `ui.isFullscreen` to the `showNavMenu` CP in the application controller
- when in fullscreen mode, display a "< Stories" link in the editor header
- refine editor header style
2018-07-26 12:53:23 +01:00
Zimo
19ca4ca0b7 Koenig Editor Beta Release
refs https://github.com/TryGhost/Ghost/issues/9505
- see https://forum.ghost.org/t/koenig-beta-release/1284 for full details
- moved Koenig editor checkbox from experimental to Beta
- added info message support in editor screen
- removed alert when opening markdown-incompatible post with Koenig disabled
2018-05-17 12:01:00 +01:00
Kevin Ansfield
21007d0630 Koenig - Use our full markdown editor in markdown card
no issue
- remove jQuery usage in `{{gh-markdown-editor}}` (general cleanup)
- switch `koenig-card-markdown` to use `{{gh-markdown-editor}}`
- update markdown editor styles to fit within the card interface
- add `{{gh-editor}}` for handling image uploads and drag/drop
2018-04-20 15:43:44 +01:00
Peter Zimon
555758a372 Koenig - Basic styles for editor content (#1006)
refs https://github.com/TryGhost/Ghost/issues/9505
- paragraph and heading styles and vert rhythm
- blockquote and link styles
- list styles
- card styles
- markdown card styles
2018-04-20 15:43:20 +01:00
Kevin Ansfield
6bff262849 Switch to packaged version of Spirit (#985)
no issue
- remove the manually copied Spirit CSS files
- remove the manually copied Spirit helpers
- install `ember-cli-ghost-spirit` addon
- remove manual postcss configuration
- update all `color()` functions in CSS to `color-mod()`
- fixed invalid `color-mod()` usage in `power-calendar.css`
- bump sub-dependencies
2018-04-03 11:52:18 +01:00
Austin Burdine
13ceee3e9f Contributor Role (#948)
refs https://github.com/TryGhost/Ghost/issues/9314

* added save button for contributor
* hide tag filter & redirect to posts.index if post is published
* update editor controller test to need session service
2018-02-07 10:42:46 +01:00
Kevin Ansfield
6d4d6cbc51 Koenig - HTML card template
refs https://github.com/TryGhost/Ghost/issues/9311
- add a basic HTML card that renders a CodeMirror editor
- adjust styles so that CodeMirror styles for the markdown editor don't affect CodeMirror instances inside Koenig
2018-02-03 19:20:50 +01:00
Kevin Ansfield
f65b07c589 Fixed horizontal scroll in editor on iOS 2018-01-08 18:32:25 +00:00
Kevin Ansfield
99576c2da3 🐛 Fixed missing cursor and selection issues using editor on iOS
closes https://github.com/TryGhost/Ghost/issues/9378
- only disable element selection on the codemirror content on desktop
2018-01-08 17:02:04 +00:00
tamura shingo
85d4759044 🐛 Fixed Japanese IME popup position in editor (#940)
closes TryGhost/Ghost#9289
- add css to fix hidden textarea position
2018-01-05 13:37:03 +00:00
Kevin Ansfield
c885b960b6 Prevent double text selection in the editor
closes https://github.com/TryGhost/Ghost/issues/9356
- it was possible to start a selection from outside of CodeMirror's control, this was confusing because text appeared to be selected but wasn't
- disable user selection on the outermost CodeMirror wrapper so that the selection behaves as it does with a normal textarea where the selection needs to start from inside the content area
2018-01-02 14:53:35 +00:00
Martín González
a24db0c64e 🎨 Improve admin styles on mobile (#903)
refs https://github.com/TryGhost/Ghost/issues/8744
- active styles for mobile nav bar
- extra padding in the editor
- fixed bugs in team listing screen
- improved layout in the "Invite a new user" modal
- fixed bugs in theme listing layout
- improved layout of "Import content" file selection/import button
2017-11-09 12:28:54 +00:00
Vikas
382e65aedc 🐛 Fixed editor font in MS Edge (#876)
closes https://github.com/TryGhost/Ghost/issues/8867
- removed smart-quotes in the editor.css file
2017-09-28 10:00:56 +01:00
Seth Lilly
3b0b45fb97 Correct custom social OG preview in nightshift
Closes #8864
Assigns overrides to `og-preview-*` classes. Previously, the classes inherited their color from `body`.

Verified against https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fblog.ghost.org%2Fcustom-social-data%2F
2017-08-25 17:43:25 -04:00
Kevin Ansfield
11cbe1abba 💄 Fixed scrollbar on editor title input in Chrome on Windows (#822)
closes https://github.com/TryGhost/Ghost/issues/8866
- add `overflow: hidden` to disable scrollbars on editor title input
2017-08-10 17:52:59 +07:00
Aileen Nowak
dd4fe3a68f Added Twitter & Facebook data override fields to PSM (#814)
refs https://github.com/TryGhost/Ghost/issues/8334, requires https://github.com/TryGhost/Ghost/pull/8827
- added open graph and twitter fields to `Post` model
- added facebook and twitter card pane to PSM
- 💅🏼 Added preview styles for custom FB/Twitter cards
2017-08-03 15:45:14 +04:00
Kevin Ansfield
d469134fb1 improve editor drop target colours 2017-08-03 15:27:59 +04:00
John O'Nolan
9738ecc9dd Minor style fixes 2017-07-10 11:20:56 +01:00
Kevin Ansfield
d2a1835f5a 🎨 fix editor header not covering scrolled content (#769)
no issue
- background color of the editor header at smaller screen sizes had been removed resulting in the editor content showing through when scrolling, this adds the explicit bg color back for both normal and dark mode
2017-07-06 17:23:14 +07:00
John O'Nolan
7295bb942d Really fix selected text colour this time
Cause apparently I wasn't fucking specific enough the first time
2017-06-21 15:56:44 +01:00
John O'Nolan
9296db0ae8 👀 bugfix editor text selection colour 2017-06-21 13:39:35 +01:00
John O'Nolan
32f419e87c Visually stimulating cursor 💅🏼 2017-06-21 13:05:14 +01:00
John O'Nolan
cbd18c6253 Update dark mode
Fixes https://github.com/TryGhost/Ghost/issues/8560

Depends on https://github.com/TryGhost/Ghost-Admin/pull/733
2017-06-12 21:50:17 +01:00
John O'Nolan
21d99b5763 More intuitive editor cursor when clicking below the current line/editable area 2017-06-05 15:31:57 +01:00
Kevin Ansfield
2243c12aca 🐛 fix IE11 bugs and styles (#724)
closes https://github.com/TryGhost/Ghost/issues/8384

- fixes image uploads on settings/general by reverting to jQuery for triggering the file dialog because IE11 doesn't support `MouseEvent` events or have the `.closest` method on native DOM elements
- gives all SVG elements an explicit `width` and `height` - if one property is set to `auto` or not specified IE11 will treat it as 100% of the container
- fixes horizontal scroll + scrollbar on the main app viewport
2017-06-01 23:02:03 +02:00
Kevin Ansfield
108cd94173 🎨 fix title placeholder styles (#728)
closes https://github.com/TryGhost/Ghost/issues/8516
- placeholders are pseudo elements so need to use `::` rather than `:` in their CSS selectors
2017-06-01 15:56:06 +01:00
Kevin Ansfield
6c56db1534 🎨 fix misalignment between view site and editor toolbar borders
no issue
- force editor toolbar to a fixed height, previously flexbox behaviour meant that it would squash the space above/below the buttons at smaller screen heights
2017-06-01 15:54:23 +01:00
John O'Nolan
74c063fc46 Updated editor styles 🤓 (#705)
no issue
- CSS fixes for new editor 🔥
2017-05-22 17:43:54 +01:00
Kevin Ansfield
1cbffa9f4f add spellcheck toggle (#697)
closes https://github.com/TryGhost/Ghost/issues/8461
- adds toggle spellcheck button to the `gh-markdown-editor` toolbar
- adds custom styles to fake a spellcheck icon
- updates `simplemde` fork
  - adds `spellcheck` to the list of toolbar buttons that don't have their `active` class removed based on cursor position
  - removes bundled `marked` dependency that we no longer use
2017-05-18 19:08:50 +09:00
Kevin Ansfield
defa4d7a07 🐛 fix broken editor layout in Safari (#696)
closes https://github.com/TryGhost/Ghost/issues/8459
- use `vh` instead of `%` for editor height
2017-05-17 19:56:28 +09:00
Kevin Ansfield
1f3800683d 🎨 disable buttons in preview, fix preview overlap (#689)
no issue

- when entering preview mode (not split-screen preview) the toolbar buttons are now disabled. This is usually built in to SimpleMDE but that wasn't working because we've moved the location of the toolbar in the DOM
- hides the markdown editor when entering preview mode to prevent the markdown code appearing at the bottom of the preview when the markdown length is longer than the preview length
2017-05-12 10:06:56 +02:00
Kevin Ansfield
23ce8f8f2c 🐛 fix visible scroll bars and disable standard preview in split-screen (#686)
no issue

- fix visible scroll bars were rendered to the right and bottom of the internal editor area in certain browser/OS configurations
- disable the preview button when in split-screen mode as it's not any use there
- exit SimpleMDE preview mode if it's active when entering split-screen mode
2017-05-10 14:36:07 +02:00
Kevin Ansfield
fb2fa06b48 Fix split screen editor (#684)
no issue

* fix title input padding and placeholder weight
* 🔥 remove unused showdown-ghost dependency
* implement full screen mode via CSS rather than autonav toggle
* implement custom split pane editor preview
    - replace SimpleMDE's split pane handling with our own so that we have more control over the element positioning, toggling of our custom fullscreen code, and so that the preview pane can be scrolled separately as per our old editor
* use forked version of simplemde that has the latest CodeMirror compiled
    - SimpleMDE hasn't been updated for 11 months and the version of CodeMirror is baked into the SimpleMDE code, to get an up to date version I've forked and re-compiled
    - pull in the unminified SimpleMDE source so that it's easier to debug in development, our asset compilation steps will take care of minifying it for production
* fix gh-markdown-editor teardown
2017-05-08 19:15:56 +01:00
Kevin Ansfield
762c3c4df0 SimpleMDE editor (#682)
no issue

* move "save on first change" behaviour into editor controller
* allow TAB events to be specified in keyEvents hash of gh-input
* replace mobiledoc-kit/gh-koenig with a SimpleMDE based editor
    - remove `gh-koenig` in-repo-addon from `package.json` so that test files etc aren't loaded
    - remove `mobiledoc-kit` dependencies
    - extends `gh-editor` to handle file drag/drop
    - adds `gh-uploader` and `gh-progress-bar` components to handle file uploads in a more composable manner
    - adds `gh-simplemde` component that wraps SimpleMDE
2017-05-08 11:35:42 +01:00
Kevin Ansfield
756b6627a9 Editor refactors (#679)
no issue

* split key commands and text expansions into separate files for easier file searches

* basic formatting, added a few comments

* move editor title input into addon
- the editor and title are now tightly integrated so that it's possible to use up/down cursor navigation so it makes more sense to keep them together
- start of a deeper component restructure so that we don't need to leak properties/actions to parent components

* first pass at refactor of gh-koenig and koenig-title-input
- remove need for editor reference to be held outside of the `gh-koenig` component by yielding it from the component so that the integrated title element can sit inside the container's scope
- refactor `gh-koenig` to more closely match the default ember mobiledoc addon
  - fixes runloop issues by starting/ending a manual runloop
- refactored the mutation observer and event handlers in `koenig-title-input` so that we're not doing unecessary work on every render/key press
- rename CSS classes to be more specific (these may still need more separation between `.gh` and `.kg` later)
  - `.editor-holder` to `.gh-koenig-container`
  - `.surface` to `.gh-koenig-surface`

* fix tests and start testing refactor

* move gh-koenig integration tests into addon, remove empty test files

* first-pass at component template cleanup

* first pass at koenig-toolbar-button refactor
2017-05-08 10:44:02 +01:00
Ryan McCarvill
e604b255af 🔢 Add wordcount feature. (#668)
closes TryGhost/Ghost#8202
-  added wordcount for mobiledoc text and html/markdown cards (cards will only update word count when leaving edit state)
- word count is only displayed on wide screens
2017-04-25 12:32:27 +01:00
Kevin Ansfield
f3dc307e2f 🐛 fix non-clickable editor header actions with wide screens (#662)
closes https://github.com/TryGhost/Ghost/issues/8366

- ensure that header actions are layered above the editor so that they are still clickable
- editor content is still selectable in the header area
2017-04-24 09:26:31 +02:00
Ryan McCarvill
33b2e20927 🐛 place no-content placeholder in the correct position in firefox. (#660)
closes TryGhost/Ghost#8322
- Previously in firefox the no-content psuedo element was placed below the actual on first load (but not subsequent reloads), this update positions it in the correct place in both scenarios.
2017-04-20 11:04:04 +01:00
Kevin Ansfield
4bf2b7bc99 🎨 responsive editor header (#653)
closes https://github.com/TryGhost/Ghost/issues/8271
- adds `gh-editor` wrapper component that checks the editor position and will apply a `.gh-editor-header-small` class if the editor content will overlap the view actions
- adds `.gh-editor-header-small` class that minifies the header and applies a solid background so that there's no conflict between editor content and header elements
- modifies `.gh-editor-header` z-index so that there's no hidden non-selectable area at the top of the screen
2017-04-20 01:20:42 +12:00