nymag / clay-space-edit Goto Github PK
View Code? Open in Web Editor NEWThe editing experience behind the Clay Space component
License: MIT License
The editing experience behind the Clay Space component
License: MIT License
un-break spaces
Updates for:
We need unit tests and to install test coverage. This has already been started but it stalled, I will update this issue soon.
It's inefficient to require Spaces and their Logic children to carry their own icon with them to make the readouts pretty. Let's add some default icons and an API around how to associate the icons with a logic to make life better for developers.
Current Icons To Be Added
Other recommendations?
Lots of TODO comments are floating around. Make sure they're all resolved.
TODO:
string in all of project unless exceptions arise.Duplicating a component into a new logic component with no logic around it. This would be an option passed into the filterableList
along with a callback function to execute as provided by Kiln.
The edit component needs to check for any component that begins with clay-space
and not limit itself to just clay-space
. This needs to occur both when making the component lists as well as when creating a component list.
Issue #15 will track the interaction of choosing between which space to use
We have icons for "Tags", "Time" and "Person", but we don't have a default icon that just means "some sort of logic". This means a user has to pick between one of the three we include to have the logic displayed in the pane. Can we find a good default icon that any type of logic can use? The developer must choose the best icon to represent their chosen logic, but a fallback is necessary.
To clean up the repo, files should be moved to a src
directory and compile to a dist
directory. Component specific files (i.e. template.nunjucks
, bootstrap.yml
, etc) can stay in root.
Need to account for future Amphora change which prefixes routes
/components/
--> /_components/
When the page loads, components on the page who have a Space in their component lists should get a "Create Space" button in the selector.
Requirements For Spaces UI Pane
The proper designs for the UI need to be implemented
As it works now, the icons for property readouts is hard coded in clay-space-edit
. The API for this should be more general because we don't want to edit the clay-space-edit
every time there's a new kind of logic property.
How it should work:
clay-space-edit
looks at this property and renders it in the readoutsAn option to change between multiple types of Space if there are multiple available within a component list. Dependent on #13
Undecided on whether or not this should be part of v1
The components that are active should be indicated in the UI and those that are not active should be hidden.
If multiple Space components are in a componentList
then a user needs to be prompted with a pane to choose which type of Space they are trying to update.
Current Implementation: Let's say we have a Space with top stories
components. One for articles tagged with "kitchen tools", another for those tagged with "shoes". If an article has the tag "kitchen tools", the Logic for the "kitchen tools" will have the active
class and be visible in Edit mode. If the article doesn't have any of those tags, the "kitchen tools" top stories
component will be active anyway. If there is no active logic for the page, clay-space-edit
will designate the first logic in the Space to be active, which happens to be the "kitchen tools" Logic.
This is confusing for the user. There is no language in the UI that describes this behavior (and I don't think there should be, it would clutter the UI). I think this is why a rogue user has been deleting Space Logics from articles, leaving Spaces empty, and triggering errors.
Maybe we should have some placeholder text in lieu of any visible Logic, that says "This Space has no Active Logics". Users will still be able to edit Logic via the "Edit Space" button.
How do Spaces work when used in an invisible componentList
?
Once the UX solved for the implementation will be tracked in a separate issue.
When the component is first added to a page it does not run because it cannot tap into kiln's plugin event system from when a Space's wrapper is added.
Two possible solutions:
The targeting logic should be displayed in the UI, but the API needs to be decided upon.
target-
or logic-
to so we know which properties should be displayed?_targeting
or something which is an array whose values are the properties that are used for targetingTests needed for:
There will probably be some UX updates for Spaces, but what we should do is leverage the schema of a Space somehow to give a user direction for how to work with the Space. The schemas are already pre-loaded onto the page, so let's use them!
After everything else is done let's make sure the progress bar is tracking updates to Spaces/Logics
Codebase should be converted to ES6 using Babel.
Currently, only one Logic component is displayed at a time because the general use case is that only one component "wins" in a Space. This assumption does not work when a user creates a Space which renders all Logics that pass a test. The edit experience should be flexible enough to handle this sort of Space.
Questions:
Any component that is wrapped in a Space should have a button to launch the UI pane to interact with targeting. This is the button which launches the UI described in #56.
Use the filterable list.
For example, updating the package-nav with a new tag on http://qa.www.vulture.com/pages/new.html?edit=true# does not refresh the package-nav with new DOM after save, even though the correct rendered component is returned from the PUT request.
Likely something around https://github.com/nymag/clay-space-edit/blob/master/src/controllers/space-controller.js#L29 according to @jonwinton
In Edit Mode
Currently, a Space's contents appear on a page even if its Logic's checks do not decide something should be displayed. This is because the Space just defaults to the last Logic in its content
. If the components in a Logic are invalid then they will be caught on publish. This is bad for people whose pages would never display the content of a Space, so how to we make sure editing a Space is consistent?
Future
When Permissions can be implemented then only certain users should be able to edit certain components/page areas. Therefore we can hide a space entirely if no Logics would be displayed on a page and the permissions model would prevent a users who aren't concerned with Spaces from being affected.
The question is: should a Space not display itself on a page if nothing matches?
Blocked by #27. Once a UX solution has been decided upon this issue will track the implementation.
do it like this:
https://github.com/nymag/clay-kiln/wiki/Kiln-APIs#buttons
instead of like this:
https://github.com/nymag/clay-space-edit/pull/66/files#diff-12be41b1bed41c27abfc6055eb578e5f
Convert the build to use Webpack 2 so we get all this stuff
These need to work as well.
Remove buttons in the component selectors should do the following:
Current Implementation: If a user deletes Logics from a Space, the Space is suppose to delete itself. This logic isn't triggering and caused a bug (alluded to in #100). However, I think we should leave empty Spaces, with some kind of placeholder, to let users add Logic to the Space.
The title for the pane when a user clicks the browse button needs to be configurable.
Change occurs here: https://github.com/nymag/clay-space-edit/blob/master/src/controllers/space-settings-controller.js#L58
To re-create:
parent
value passed from Kiln is an empty objectparent
is used to construct the possible components that can be added to a spaceProblems
Possible Solution
This may require amending the Kiln logic which grabs the parent's information.
... so we can debug things.
Events that should be tracked:
A CI service needs to be setup. Either CircleCI or TravisCI.
A Logic needs to be converted to the model.js format for proper testing
Update this section to pull from whichever Space's componentList
. This is dependent on #13
Get the build working with anything Vue related. Details to be described once they've been discovered.
Right now everything is dependent on the clay-space
and space-logic
class. Explore how to expand this/abstract it to be more reusable.
Documentation needs to be provided for the following:
componentList
+ filter)Ideally, this documentation would live inside the Wiki and the README can reference that.
This line will break everything: https://github.com/nymag/clay-space-edit/blob/vue/src/ui/create-space-button.vue#L22
Assumes components is named layout
. Need to fix.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.