refs TryGhost/Ghost#6413 and TryGhost/Ghost#6870
needs TryGhost/Ghost#6861
- **Post Settings Menu (PSM)**:'Publish Date' input accepts a date from now, min. 2 minutes to allow scheduler processing on the server. Also, there will always be some delay between typing the date and clicking on the 'Schedule Post' button. If the user types a future date for an already published post, the date will be reseted and he sees the message, that the post needs to be unpublished first. Once, the date is accepted, the label will change to 'Scheduled Date'.
- adds a CP 'timeScheduled' to post model, which will return `true` if the publish time is currently in the future.
- **Changes to the button flow in editor**:
- if the the CP `timeScheduled` returns true, a different drop-down-menu will be shown: 'Schedule Post' replaces 'Publish Now' and 'Unschedule' replaces 'Unpublish'.
- Covering the _edge cases_, especially when a scheduled post is about to be published, while the user is in the editor.
- First, a new CP `scheduleCountdown` will return the remaining time, when the estimated publish time is 15 minutes from now. A notification with this live-ticker is shown next to the save button. Once, we reach a 2 minutes limit, another CP `statusFreeze` will return true and causes the save button to only show `Unschedule` in a red state, until we reach the publish time
- Once the publish time is reached, a CP `scheduledWillPublish` causes the buttons and the existing code to pretend we're already dealing with a publish post. At the moment, there's no way to make a background-fetch of the now serverside-scheduled post model from the server, so Ember doesn't know about the changed state at that time.
- Changes in the editor, which are done during this 'status freeze'-process will be saved back correctly, once the user hits 'Update Post' after the buttons changed back. A click on 'Unpublish' will change the status back to a draft.
- The user will get a regular 'toaster' notification that the post has been published.
- adds CP `isScheduled` for scheduled posts
- adds CP `offset` to component `gh-posts-list-item` and helper `gh-format-time-scheduled` to show schedule date in content overview.
- sets timeout in `gh-spin-button` to 10ms for `Ember.testing`
- changes error message in `gh-editor-base-controller` to be in one line, seperated with a `:`
TODOs:
- [x] new sort order for posts (1. scheduled, 2. draft, 3. published) (refs TryGhost/Ghost#6932)
- [ ] Move posts sorting from posts controller to model and refactor to use `Ember.comparable` mixin
- [x] Flows for draft -> scheduled -> published like described in TryGhost/Ghost#6870 incl. edge cases and button behaviour
- [x] Tests
- [x] new PSM behaviour for time/date in future
- [x] display publishedAt date with timezone offset on posts overview
no issue
- remove the outline that is shown on the search input once the dropdown box has closed
- remove unused styles for the old selectize-based search input
Update for synchronous feature service
Add client-side handling of server-side errors when adding subscribers
- display server-provided error message when we get a server error
- fix the ajax util's `getRequestErrorMessage` method so that it works correctly with Ember's `InvalidError` object instead of the previous request object that it was receiving (*TODO:* this really needs looking at properly so we aren't losing details and Ember Data can do it's stuff)
Styling updates
- proper icon for ascending/descending
- change hover colour to green for "Import CSV" button
Delete subscriber button with confirm modal
- display delete button when hovering over a subscriber row (WARN: really ugly button, styles definitely want looking at)
- show confirm modal when clicking the delete button
- delete subscriber, remove from table, and update total on confirm
Initial Subscribers screen
- set up mocked api endpoints
- basic subscribers screen with data loading, infinite scroll
"Add Subscriber" screen
- uses modal to display a new subscriber form
- validates subscriber e-mail address
- moves pagination from route into controller to use filtered/sorted CPs on top of a live-query so that new subscribers are added to the list and the total can be properly managed
TODO:
- there is currently a pretty serious performance issue where the whole table is re-rendered when the live-query is updated. `ember-light-table` doesn't allow for live-binding and has no options to easily manipulate it's rows using an external interface - it's possible to move the page loading into the component so we only render new rows but that leaves it difficult to react to new subscribers being added through the UI. I believe the number of components used within the table is also adding to the performance problems.
- most likely solution is to drop `ember-light-table` in favour of rendering the table directly - glimmer should do a good job of fast updates even though the underlying array will be completely swapped out
"Import subscribers" screen
- uses modal to display an import subscribers CSV file upload form
- displays upload progress
- displays import stats and reloads subscribers table once import has completed
- adds `gh-file-uploader` component (NB. pared down copy of `gh-image-uploader`, ripe for some refactoring)
- fixes subscribers acceptance test failing because fixtures did not have the labs flag enabled
Unfortunately this doesn't have 100% test coverage as we're limited in how we can simulate file uploads 😞
Fix performance issues with subscribers table
- moves the table definition from the component up to the controller
- switches back to manually manipulating table rows instead of using a live-query
This is a quick-fix in that it allows us to continue using the `ember-light-table` component but it does mean that we lose some flexibility that the live-query gave us. For now it's not much of an issue and it allows us to defer deeper performance/flexibility work until we have a concrete need and requirements.
Hook up Export CSV button
- use a hidden iFrame to trigger the browser to hit the CSV export endpoint and download the file
Re-order subscribers table by clicking column headers
- displays currently sorted column and sort direction
- clicking a column header re-fetches the data from the server with the appropriate query params
Fix scroll triggers for infinite pagination + icon change
- adds a debounce as well as the throttle so that we always get a final scroll trigger once scrolling has stopped
- changes the subscribers icon from the temporary team icon to the mail icon
closes#6584
- Frontend Changes:
- adds 'Apps' to Navigation Menu
- adds 'Slack' as nested page to Apps
- adds `apps.css`
- adds `slack-integration` model and uses `slack-settings` custom transform to parse JSON file
- adds validation for `slack` model
- adds fixtures and `slack/test` API endpoint to Mirage
- adds acceptance tests for `apps-test` and `slack-test`
- adds unit tests for `slack-settings` and `slack-integration`
- Backend Changes:
- adds API endpoint `slack/test` to send Test Notification
- adds default-values for slack model
- sends payload to slack:
- text: the url of the blogpost / test message
- icon_url: url to ghost logo
- username: Ghost
- adds `slack/index.js` to send webhook to slack if
- a new post is published (if slack webhook url is saved in settings)
- user clicks on 'Send Test Notification' in UI
- adds `slack.init()` to `server.index.js` to add event listener
- adds unit test for `slack/index`
no issue
- adds `gh-image-uploader` that handles image uploads in a fully ember fashion and with no dependency on `uploader.js`
- adds `gh-image-uploader-with-preview` that can fully replace the old `gh-uploader`
- replace uses of `gh-uploader` in PSM & TSM with `gh-image-uploader-with-preview`
- updates the editor preview image handling to use the new `gh-image-uploader-with-preview` component
- updates the image upload modal to use `gh-image-uploader` (utilises the `saveButton=false` flag which means the preview has to be handled externally to avoid auto-replacement when typing a URL)
- removes all old `uploader.js` related code
- adds custom `RequestEntityTooLargeError` and `UnsupportedMediaTypeError` errors to our `ajax` service
Closes#6440
* Removed the `.fake-placeholder`class from the input, test, and css
* On adding a nav item, if the url value has not been set by the user,
then set it to the base url as shown in the input
* If url has been set by the user, just do what it has always done
refs #5986
- removed static position of the skiplink to prevent pushing the page content down
- only applying :focus CSS selector to focusable sr-only content
refs #6458, closes#6457
- replaces jquery-ui.sortable with ember-sortable for drag-n-drop handling
- moves the "new/blank" nav item out of the nav items list
- allows it to be excluded from the draggable list
- cleans up handling of the `navigationItems` array as there's no longer a need to ignore/exclude this extra item
- clears validation errors when typing in the respective field
- adds acceptance test for adding/removing nav items
- improves acceptance test for saving nav items to cover more edge cases
closes#6380
- wraps `<img>` element with a `<div>` to workaround buggy browser behaviour (https://github.com/philipwalton/flexbugs/issues/14)
- adds explicit `width: 100%` to `img` element to fix Firefox not scaling down to mobile sizes
Remove shadow on last tag item hover, was an inconsistent style addition thats not used elsewhere such as the content list
- Remove box-shadow on last of type settings tag hover state
- http://g.recordit.co/CEglFT7Hlr.gif
Remove * selector and specify user-select on individual classes for performance.
- remove * selector
- update classes that benefit from user-select none
Having different visuals based around if a radio/checkbox uses a label or not is weird and style changes should use a class modifier.
- Merged the two together as I was unable to find an example checkbox/radio in use that did not use the label tag
Improved UI for radio/checkboxes
- Added cursor pointer to radio/checkboxes
- Added hover state to radio/checkboxes
Add cursor to select boxes for usability
- cursor: pointer; added to select boxes
Add hover state to post edit icon
- add dark grey hover state to post edit icon
Add visual hover to nav user menu dropdown
- Move dropdown icon to visually indicate hover
refs #5798, closes#5018
- adds new `gh-fullscreen-modal` component - modals are now specified in-context so that they can have deeper interaction with their surrounding components/controller/route, i.e. a modal component can be a thin confirm/deny wrapper over the underlying controller action keeping all context-sensitive logic in one place
- adds spin-buttons to all modals with async behaviour
- adds/improves behaviour of inline-validation in modals
- improves re-authenticate modal to properly handle validation and authentication errors
refs #5845, #5969
- when on mobile devices tag management UI will only display a list and when a tag is accessed the tag settings form will slide in from the right
- tag settings form header has a 'back' button when on mobile to go back to tags list
- switching from mobile to standard modes will auto load the first tag as per standard tags screen on desktop
- if no tags are present then the blank-slate template will be shown when on mobile
refs #5845
- Updates tag settings screen to match content screen behaviour. Each now tag has it's own route that is link-able from other areas of the app
- Updates a number of places where jQuery event handler code was not wrapped in Ember's run loop
closes#5804, supersedes and closes#5820
- adds a fixed width that flexbox can expand from to prevent flexbox content dictating the width (see https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812)
- adds a hack to the casperjs tests reverting the CSS change because phantomjs and flexbox don't get along
issue #5841
- fix relative link checks in navlink url input component
- fix navlink url input component sending absolute URLs instead of relative URLs to action handler
- remove URL manipulation in navigation settings controller (url input handles URL manipulation, validator flags anything that's still incorrect)
- capture cmd-s in url input to ensure changes are actioned before save
- automatically add mailto: to e-mail addresses
- add gh-validation-state-container component so .error/.success validation classes can be applied to any container element
- add validation-state mixin that can be mixed in to any other component to give it access to validation status (used in gh-navitem component to keep alignment when inline error message elements are added)
- validate and display inline errors on save
- improve ember test coverage for navigation settings related controller and components
refs #5652
- reverts previous fix (#5698) to return translate3d smoothness
- add separate open-autonav toggle element and style it to always stick to the viewport edge to avoid wandering hover hit areas
refs #5652
- on mobile, add Markdown/Preview links to the editor footer that switch between the respective views
- temporary resolution to the inability to upload on mobile without access to the preview
refs #5343, #5652
- implements basic post and user search using selectize input
- queries minimal API endpoint and refreshes results on search input focus if results are older than 60 seconds
refs #5652
- add `ember-resize` addon that registers a single resize event handler and exposes it as a service and mixin
- add a component that wraps the posts list and content preview and exposes a `previewIsHidden` property
- use the `previewIsHidden` property in `gh-posts-list-item` to switch the item's link between the editor and the preview
- add `display: none` to the preview pane when in mobile so that we can test it's visibility
Lastpass injects its password-fill icon into password inputs, this shows up awkwardly with the forgot-password button. Adding a white BG hides this.
Followup on #5641
issue #5652, closes#5641
- removes inline errors for empty fields
- separate validation routines for sign-in and forgot password
- highlight fields with errors when trying to submit
- use `transition: left` instead of `transform: translate3d`
- fixes issue where translate3d moves the element immediately then animates resulting in invisible hit areas that cause unexpected hover behaviour whilst animation is in progress
- translate3d is sometimes faster as it doesn't need to constantly re-calculate layout, however in this case the element is positon:absolute and we're only animating opaque elements so the benefit is marginal. Tested on Late-2012 13" retina MBP and framerate was consistently 100fps or higher.
- Modal button position tweaked, removed extraneous margin
- Fix user profile full name field and mobile profile-picture
- Added chevron to tag settings men, corrected chevron colour
- Fixed regression in delete-tag button caused by removing flexbox from buttons
- Fixed regression in button positioning on about-ghost page caused by removing flexbox from buttons
See #5652
- Lighter dropdown shadow
- Removed display:flex from .btn because safari can't handle it on <button> elements, where it will immediately set all text-alignment to "left" with no way to change. I haven't been able to find any regressions for this change so far. Can't remember why buttons were supposed to be flexbox anyway. Maybe for icon alignment within buttons, but I can't find any such examples within the app.
- Safari thinks that user-select: all; means a single click should SELECT ALL THE THINGS. Removed/replaced with user-select: text; which makes it behave like Chrome; click and drag to select.
- Increased hit area for "?" button
- Removed :active style for post-edit button on content management screen, adjusted position
- Increased contrast on tag description, tag count, and view blog links
See #5652
issue #5409
- change persistent/passive notification status to alert/notification
- replace showSuccess/Info/Warn/Error with showNotification/showAlert
- fix and clean up notification/alert components
- Incorrect message was shown (Invitation sent instead of Invitation not sent)
- Correct colouring of message (new .description-error class)
- Correctly display lastLogin time
- Add colour classes
Closes#5459
- added a PNG background with 2 emails addresses as a "placeholder"
- added a `required` attribute for textarea in 3rd step of the setup
- taking an advantage of `:valid` pseudo-class to hide the background
picture with email addresses
Firefox can't do flexbox, because why would a modern browser be able to do flexbox? Cray.
Closes#5438, Closes#5401 - same fix but vh unit because % unit is hella unreliable.
Prevents firefox from allowing blog title to overflow. This is an incredibly stupid fix for an incredibly stupid browser bug. Firefox is the worst modern browser in the world at basic layout rendering. Could someone let them know please? Closes#5430 as replacement.
closes#5433
- add gh-input class to inputs
- stop the incorrect addition of trash can on url page
- fix trigger of upload success to show loading in editor
- fix duplicate url field for images outside of editor when there is no file storage
When buttons changed to flexbox they lost some alignment properties. This change makes the container for the empty content state use a flexbox container and align its containing items correctly. Also removes some old media queries which are no longer needed.
No issue. Fixes bug where signin form was not expanding to its full width as a result of some earlier global changes. This sets an explicit fluid width with a max-width fallback so that it's always the correct size.
No issue
- Move editor-base-view mixin into editor/edit view
- Also deletes mobile views and modifies files that were using it
- Helps pave the way for Ember 2.0, where views do not exist
- [x] Mobilemenu button is missing from `content` and `editor` views
- [x] Mobilemenu pane slides entire content over, should expand over-top-of-content
- [x] Mobilemenu can't be closed
- [x] gh-view-title no longer generates an extra div; it is the h2.
- [x] gh-autonav-toggle closes the mobile menu on mobile. renamed `gh-menu-toggle`
- [ ] There is weird behaviour with mobile menu when changing from big=>small=>big viewport sizes
- ~~[ ] (Future issue) Ghost should remember (localstorage?) whether desktop menu is expanded or collapsed~~
Merging setup screen into the new app wrapper had some knock-on effects due to new flexbox parent elements. As a result things were vertically collapsing in unexpected ways on narrow viewports. This is cleaned up here, with some other minor visual bugfixes.
closes#5338
- moves skip link to below the submit button
- makes the submit button better represent form status
- posts notifications based on success/failure of notifications
- goes to the invite page after user creation
- actually sends invites!
functional tests passing for onboarding invitations
cleanup for linitng
remove unreachable return
access the notifications service better
use link-to instead of an anchor with an action
failed user creations get caught, and bubble as errors
a slew of other cleanup stuff via jason
- Adds gh-view-title component to implement mobile menu button for titles on any page
- Refactors the `content-cover` out into the application template
- Fix various z-index issues with content-cover and gh-alert
- Move `.settings-menu-expanded` application view state from body to `.gh-viewport`
- Unify nav menu / mobile menu actions and code
Refs #5097
- All drafts will show a preview link (this needs real css)
- Published posts will redirect
- prev/next post helpers only activate on published posts
- Powered by ~10 pints between the two of us (@ErisDS, @novaugust)
Closes#5179
- Overwrites the yellow code injection syntax highlighting (such as vendor prefixes in CSS) to be black, to match the rest of the property
- Adds rounded corners to the code injection CodeMorror wrapper to match its parents rounded corners (inherits the same value)
References #5071
- Re-implements the previously broken top notification styles
- Moves the top notification outlet outside the `<main>` to ease styling (we have several nested position fixed/absolute boxes that make this tough - moving the outlet makes it easier)
- if the user has filled out their email already when they hit 'forgotten password' then automatically fill out and submit the form
- this will look better when we have spinners on the buttons
No issue
The `icon-x` class got messed up when I attempted to dry up our icon code in both https://github.com/TryGhost/Ghost/pull/4948 and 35b3d92c74. All that was left was an `x` in the file.
This adds that class back, so the `icon-x` icon works again.
References https://github.com/TryGhost/Ghost/pull/4373
* Consistent line-height & padding cross-browser
* Remove drag handle from textarea
* Partially clean up the CSS to more closely match the new standard
closes#4368, fixes#1240 (spellcheck), fixes#4974 & fixes#4983 (caret positioning bugs)
- Drop CodeMirror in favour of a plain text area
- Use rangyinputs to handle selections cross-browser
- Create an API for interacting with the textarea
- Replace marker manager with a much simpler image manager
- Reimplement shortcuts, including some bug fixes
