Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: theme editor POC #1296

Open
wants to merge 3 commits into
base: master
from

Conversation

@jh3y
Copy link
Contributor

commented May 17, 2019

Description

  • integrates an inline theme editor for the base web documentation site
  • user can edit a theme and see update applied to site globally
  • user can copy to clipboard, import and export theme

Note

  • This is a rough POC
  • Code is far from perfect and any suggestions are welcome
  • UX hasn't been truly considered yet so any ideas are appreciated
  • Styling would be good bounce ideas on too

Scope

  • Patch: Bug Fix
  • Minor: New Feature
  • Major: Breaking Change

@jh3y jh3y force-pushed the jh3y:feat/theme-editor branch from c554a17 to c79e437 May 17, 2019

@gergelyke gergelyke added the feature label May 17, 2019

@jh3y jh3y force-pushed the jh3y:feat/theme-editor branch from c79e437 to eb2a090 May 22, 2019

@chasestarr
Copy link
Member

left a comment

lets remove the copy to clipboard - it feels sub-par than the export utility and there is benefit in having an obvious 'call to action'. the UX can be improved, but I don't think that stops an initial release here

@jh3y

This comment has been minimized.

Copy link
Contributor Author

commented Jun 18, 2019

Yeah I have purposely left the UX a little rough with the hope that it would spark some discussion around how it could look/work.

You would prefer to have the Copy action removed then? I wasn't sure, I did kinda like the idea of hitting the button and then pasting it into an IDE.

Also, there's no icon on the tab and the styling is a little lacking. I imagine Update would be the main CTA. I could make that full width potentially.

@chasestarr

This comment has been minimized.

Copy link
Member

commented Jun 18, 2019

Copy paste gives me the text (with slashes) below, to me it did not feel like actionable data but may be better if the text rendering was improved. I've been talking to teams that are interested in taking advantage of this tool, and they hope that they can work with designers to get the details dialed in, and then be sent the custom theme. I'm expecting the primary audience to not be developers, but designers.

\"breakpoints\":{\"small\":320,\"medium\":600,\"large\":1280},\...

some more random thoughts below:

  • Could the theme be updated automatically? It would be great to have this mirror a tool like figma or sketch as much as possible.
  • The reset button should likely have a confirmation step before wiping out all of the information.
  • It would be nice to have this tool be context aware. For example, if the site visitor was on the button page, it would surface the button variables more prominently.
  • A large form is likely not the best way to display and edit this information. It would be ideal to see color previews and maybe color pickers? Could the data be organized so that there are less 'folders'?

I made a quick mockup of a layout with some icons, it may be too complicated, but it's ideal to use icons because once users try the buttons for the first time the UI gets out of the way from creative work. The icons in the mockup are totally random btw

Screen Shot 2019-06-18 at 10 49 15 AM

@chasestarr

This comment has been minimized.

Copy link
Member

commented Jun 18, 2019

Here's another direction: https://element.eleme.io/#/en-US/theme/preview where the theme editor is an encapsulated 'page'

@jh3y jh3y force-pushed the jh3y:feat/theme-editor branch from eb2a090 to c0169c7 Jun 18, 2019

@jh3y jh3y marked this pull request as ready for review Jun 18, 2019

@jh3y jh3y requested review from gergelyke, nadiia, sandgraham and tajo as code owners Jun 18, 2019

@jh3y

This comment has been minimized.

Copy link
Contributor Author

commented Jun 18, 2019

I've removed the "copy" functionality and updated.

There are some good ideas and as much collab/discussion as possible would be ideal. I would prefer icons. However, I haven't used icons as I assumed these may be provided by a designer at a later stage.

I made it a big form as that was the simplest thing. I didn't want to invest a lot of time into a solution that may be discarded.

The thing that needs to be factored in with a design is performance. You can do updating automatically. Perf takes a hit though unless you do something like mutate the theme object or debounce the input potentially. The theme object is large. Should the whole thing be editable? How?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.