Commit Graph

564 Commits

Author SHA1 Message Date
Kevin Ansfield
db74744d2b Update styles for content screen, buttons, and app frame
* Updates styling on content management screen, replaces button styles, tweaks application frame style
2017-02-16 19:50:05 +00:00
John O'Nolan
f7fe91ceac WIP: New content (#528)
* Initial style updates
* First pass content management design overhaul
2017-02-15 12:43:49 +00:00
Kevin Ansfield
c16d633d4b New content screen prototype (#503)
refs https://github.com/TryGhost/Ghost/issues/7860

- remove preview pane from content screen
- add basic post status filters
- replace custom infinite scroll with ember-infinity and increase trigger threshold for improved scroll behaviour

Commits:
* basic content list + filter using existing infinite scroll and pagination
* swap our custom pagination + infinite loader for `ember-infinity`
* minor cleanups
* reset scroll position when changing filter
* fix tests
* remove client-side sorting step as we no longer have a live collection
* remove unused `mobile-index-route`
* add acceptance tests for content screen filters
2017-01-25 21:05:28 +01:00
Kevin Ansfield
99dd49903d 🏃 improve navigation responsiveness with loading substates (#495)
no issue
- add loading substates for all routes that previously blocked transitions until their model had finished loading
  - enables immediate response on navigation click
  - loading templates include the title bar to provide immediate indication of which page is loading
  - loading templates include a new `{{gh-loading-spinner}}` component that will only show the spinner after 200ms to avoid flashing a spinner for users on fast connections
- updated Version Mismatch tests to match new behaviour of intermediate transitions when navigating
2017-01-17 17:44:08 -06:00
Kevin Ansfield
7a5481f242 display a spinner whilst the app is loading (#491)
no issue
- use the same loading indicator as used on my.ghost.org
- will display whilst the JS is loading and initializing rather than showing a completely blank screen
2017-01-15 15:11:43 -06:00
John O'Nolan
838e16a1d3 Editor and 1.0 style updates 2016-11-14 16:55:08 +07:00
Kevin Ansfield
006b9420bf deps: ember-power-select@1.0.0-beta.22 2016-10-07 17:32:30 +01:00
Kevin Ansfield
2844c896a8 refactor gh-fullscreen-modal component to use liquid-wormhole directly (#281)
no issue

- remove `liquid-tether` dependency
- add `liquid-wormhole` dependency (previously a dependency of liquid-tether)
- refactor `gh-fullscreen-modal` to simplify and use `liquid-wormhole` directly instead of `liquid-tether` as we don't need the positioning ability that `liquid-tether` provides
- fixes broken View/Component tree in Ember Inspector 🎉
2016-10-07 14:27:39 +01:00
Kenneth Ashley
30cebae22c Safari doesn't show dragged-over state for file uploads (#288)
closes TryGhost/Ghost#7310
- Removes double dashes from modifier classes as safari won’t allow this.
2016-09-24 11:10:08 +02:00
Kevin Ansfield
2a1584af16 🐛 fix duplicate server alerts + default alert bg color (#242)
closes https://github.com/TryGhost/Ghost/issues/7305

The `location` property of server-side notifications was being ignored by the client and so wasn't being used to de-duplicate alerts.

- adds `key` attribute to `Notification` model
- adds a serializer for notifications that renames the `location` key sent by the server to `key`
- set the default background color of alerts to white so that alerts with no `type` set do not inherit the background color (useful in Ghost Desktop which has a transparent background color set)
2016-09-01 11:01:54 -05:00
Kevin Ansfield
0abe447551 theme management UI
refs https://github.com/TryGhost/Ghost/issues/7204, requires https://github.com/TryGhost/Ghost/pull/7209

- replaces theme dropdown with a table
- adds theme upload modal
    - validates theme mime type
    - prevents upload of `casper.zip` (default Casper theme can't be overwritten)
    - warns if an upload will overwrite an existing theme
    - gives option of immediately activating the uploaded theme or closing after successful upload
- adds theme activation link/action
- adds theme download link/action
- adds theme deletion modal
    - warns about no undo possibility
    - offers possibility to download theme
- modifies mirage config to handle theme changes
2016-08-23 12:42:38 +01:00
John O'Nolan
52e34b530c Minor visual bug fixes (#212)
- Fix positioning bug introduced in #211
- Adjust search results max-height to be based on viewport height
2016-08-18 09:57:19 -06:00
John O'Nolan
22ef644463 Switch to new native system font stack (#211) 2016-08-18 12:42:42 +01:00
Austin Burdine
877dc89ddb fix cross-browser support (#164)
closes https://github.com/TryGhost/Ghost/issues/7149
- fix tests in Safari
- fix template tag issue in IE and edge
- various IE css fixes
2016-08-06 09:04:06 +02:00
Aileen Nowak
2b20e6d3e1 Fixes curser changing to pointer on hover (#127)
closes #7100

Adds `:hover` pseudo-class to `gh-notification-schedule` that sets the curser to default to avoid having it as a pointer on hover.
2016-07-15 09:30:50 -06:00
Kevin Ansfield
b4cdc85a59 "400 Version Mismatch" error handling
refs https://github.com/TryGhost/Ghost/issues/6949

Handle version mismatch errors by:
- displaying an alert asking the user to copy any data and refresh
- disabling navigation so that unsaved data is not accidentally lost

Detailed changes:
- add `error` action to application route for global route-based error handling
- remove 404-handler mixin, move logic into app route error handler
- update `.catch` in validation-engine so that promises are rejected with the
  original error objects
- add `VersionMismatchError` and `isVersionMismatchError` to ajax service
- add `upgrade-status` service
  - has a method to trigger the alert and toggle the "upgrade required" mode
  - is injected into all routes by default so that it can be checked before
    transitioning
- add `Route` override
  - updates the `willTransition` hook to check the `upgrade-status` service
    and abort the transition if we're in "upgrade required" mode
- update notifications `showAPIError` method to handle version mismatch errors
- update any areas where we were catching ajax errors manually so that the
  version mismatch error handling is obeyed
- fix redirect tests in editor acceptance test
- fix mirage's handling of 404s for unknown posts in get post requests
- adjust alert z-index to to appear above modal backgrounds
2016-07-08 14:56:26 +01:00
Aileen Nowak
9a28e5d7d5 Scheduler UI
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
2016-06-13 17:01:42 +02:00
Kevin Ansfield
83c9270682 Subscribers: Admin User Interface v1
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
2016-05-11 10:28:11 +02:00
Aileen Nowak
753f307382 Slack integration
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`
2016-05-08 12:49:15 +02:00
Austin Burdine
eb2e369326 replace gh-selectize with power-select in gh-search-input
refs #6458
2016-04-19 10:55:10 -05:00
Kevin Ansfield
62553cdf92 Replace jQuery-based uploader.js with ember components
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
2016-04-05 12:03:20 +01:00
Kevin Ansfield
9d67980a7e Refactor modals
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
2016-01-12 20:53:08 +00:00
Austin Burdine
bb68484af4 set the settings-menu max width for mobile devices < 350px wide
fixes #5933
- sets the max-width of the settings-menu to 100%
2015-10-17 09:08:10 -05:00
John O'Nolan
e99670db65 Search mobile fixes 2015-09-02 16:13:18 +02:00
John O'Nolan
e7f1af2e6d Search styling 2015-09-02 12:07:47 +02:00
Kevin Ansfield
6b8b1dfb0d Display "No results" message when no search results found
no issue
- add a "No results" element to the search dropdown on creation and show/hide it appropriately
2015-09-02 09:23:20 +01:00
John O'Nolan
b8934f7a8a Consolidation of dropdown sizes 2015-08-27 13:27:49 +02:00
John O'Nolan
65939c2d86 Customised selectize theme for Ghost tags 2015-08-27 12:15:37 +02:00
Hannah Wolfe
87b197ffc9 Merge pull request #5730 from JohnONolan/XELDA
Xelda
2015-08-26 15:19:56 +01:00
Kevin Ansfield
8658e98de3 Copy selectize styles ready for customisation
no issue
- prevent ember-cli-selectize addon auto-importing styles
- copy all previously imported selectize styles into the app styles
2015-08-26 14:32:39 +01:00
John O'Nolan
a455809cab Increase hit area on PSM controls
Closes #5714
2015-08-26 15:20:41 +02:00
John O'Nolan
58a86d17be Optimise mobile navigation
Make everything a little bit larger on small screens
2015-08-25 18:01:26 +02:00
John O'Nolan
f59aa45ea1 Fix splitbutton height regression
Caused by removing display:flexbox from buttons a while back
2015-08-25 13:58:24 +02:00
Kevin Ansfield
3efdfdf79f Replace the current tag input with a selectize based input
issue #3800, closes #5648
- uses ember-cli-selectize addon for the tag editing functionality in the PSM
2015-08-20 14:40:56 +01:00
John O'Nolan
8dd69ddaef Variety of style fixes
- 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
2015-08-13 10:04:45 +02:00
John O'Nolan
eb08826f3e Multiple minor visual style fixes
- 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
2015-08-12 10:29:40 +02:00
Kevin Ansfield
ee89b11a6a Refactor notifications service & components
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
2015-07-28 12:26:11 +01:00
John O'Nolan
4b5fc201a2 Main colour audit
Clean up grey colours by mixing in slightly more blue, standardise appearance across different parts of the app and move closer to brand  colours.
2015-06-24 13:37:37 +01:00
John O'Nolan
061f3171ee First pass colour audit
This gets rid of old and un-used, or lesser-used colour variables.
2015-06-24 12:15:48 +01:00
cobbspur
029e79b494 Take Trashcan off of url screen for image uploader
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
2015-06-23 13:14:04 +01:00
Matt Enlow
d37a51fb90 Zelda menu z-index and viewport transition finishes
- [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~~
2015-06-14 13:57:09 -07:00
John O'Nolan
044d61745c Refactor Zelda dropdown styles
- New styles for dropdowns
- Fix minor tag-delete button bug
- Fix minor alignment bug on invite-user modal
- Update "about ghost" icon
2015-06-09 11:06:35 +01:00
Matt Enlow
753da0231f Add mobile menu open button and close on click outside nav
- 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
2015-06-08 22:13:34 +02:00
John O'Nolan
636390b58e Content management & editor refactor 2015-06-05 13:58:00 +01:00
John O'Nolan
fa8b0542ce Fix modal close icon colours 2015-05-24 21:03:55 +01:00
John O'Nolan
ca21e055be Fix z-index bug on notifications 2015-05-22 19:05:18 +01:00
John O'Nolan
68fa1fb32a Fix uploader styles 2015-05-22 19:05:14 +01:00
John O'Nolan
cd8b62a7fa Introduce new notification and alerts components 2015-05-22 19:05:13 +01:00
John O'Nolan
3c3360c4f0 First pass new notification component 2015-05-22 19:05:12 +01:00
John O'Nolan
21d598b6e0 Introduce CSScomb 2015-05-22 19:05:10 +01:00
John O'Nolan
8f9f7a9b5e Cleanup CSS code style 2015-05-22 19:05:10 +01:00
John O'Nolan
040593ab3b Disable user selection by default 2015-05-22 19:05:09 +01:00
John O'Nolan
a03c7df599 Convert Sass to Myth 2015-05-22 19:05:09 +01:00
John O'Nolan
d3527bba7f Cleanup. 2015-05-22 19:02:10 +01:00
John O'Nolan
fbfc1f1243 Remove extends 2015-05-22 19:02:09 +01:00
John O'Nolan
e7b07895e2 First pass - strip mixins 2015-05-22 19:02:09 +01:00
John O'Nolan
6972271dd6 Move in new icons 2015-05-22 19:02:09 +01:00
John O'Nolan
2adba97086 Dem colours 2015-05-22 19:02:08 +01:00
John O'Nolan
c8686491f6 Much fix 2015-05-22 19:02:08 +01:00
John O'Nolan
1802442d40 Integrate new admin frame 2015-05-22 19:02:05 +01:00
Paul Adam Davis
1dfc1ecca3 Move upgrade notification to /settings/about/
Refs #5071

- Move the Upgrade notification from the top of the screen to the About page
2015-04-29 22:34:04 +01:00
Paul Adam Davis
d5715549f0 Re-implement top notification position styles
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)
2015-04-07 18:36:03 +01:00
Pascal Borreli
f17dbfc6f0 Fixed typos 2015-03-17 17:43:53 +00:00
Matt Enlow
589a563b30 The great migration (EAK -> ember-cli) 2015-03-11 12:37:41 -06:00