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

[PoC] new Toolbar #439

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[PoC] new Toolbar #439

wants to merge 2 commits into from

Conversation

JiLiZART
Copy link
Contributor

@JiLiZART JiLiZART commented Oct 1, 2020

Q A
Is bugfix?
New feature? ✔️
Breaks BC? ✔️
Tests pass?
Fixed issues --

Hi! This is my proof of concept MVP of toolbar build as web component with enabled shadow DOM on top of Vue2 framework

Main goal of this is to provide more structured and more extendable features for toolbar.

You can see in video how it looks like https://yadi.sk/i/7CBAndxoH_b6Lg

Main Features

  • No css and any style collisions (thanks to shadow dom)
  • Easy to use, the main data format for build toolbar is JSON, no any html + js mess required
  • Reactive way to build reach UI, for ex: automatic update information in toolbar, or display more rich ui neither just labels and numbers

How it works?

You need to include js file and define html tag like so

<script src="https://unpkg.com/@devbar/toolbar/dist/dev-bar.js"></script>
<dev-bar url="/url/to/data.json" some-params="true"></dev-bar>

And define json data that looks like this

{
   "title":"Devbar",
   "logo":"url to image or base64 string",
   "placement":"bottom-right",
   "tabs":[
      {
         "title":"Ajax",
         "content":[
            {
               "text":"Ajax"
            },
            {
               "label":"1",
               "type":"primary"
            }
         ],
         "info":[
            [
               {
                  "text":"Ajax"
               },
               {
                  "label":"1",
                  "type":"success"
               }
            ],
            [
               {
                  "icon":"memory"
               },
               {
                  "text":"Reqiests"
               },
               {
                  "label":"1",
                  "type":"dark"
               }
            ]
         ]
      },
      {
         "title":"Performance",
         "content":[
            {
               "icon":"timer"
            },
            {
               "label":"13 ms",
               "type":"info"
            },
            {
               "icon":"memory"
            },
            {
               "label":"1.612 MB",
               "type":"info"
            }
         ]
      }
   ]
}

It's uses this package published in npm https://github.com/jilizart/devbar

Why Vue2?

Because this is looks like jquery drop'in replacement
But more powerful, more reactive and provides api to build rich UI without pain.
And u don't need any sort of transpilers and any hard build systems.
Support of web components and shadow DOM out of the box
Ability to compile any html template with variables on runtime

This is proof of work concept and many problems need to be solved

  • Design json schema to build more reactive behavior
  • Provide API for js part for able to extend and add more features and components to display
  • Library tests
  • Yii2 Debug Module tests
  • Ability to build own pages (for ex shell tab using https://github.com/samdark/yii2-webshell)
  • Settings page to define toolbar positions and behavior
  • Dark theme support and night transition

I need your feedback and any suggestions, how it can be better to implement this features or maybe you have any concerns about how really it should work

Cheers :)

@JiLiZART JiLiZART changed the title PoC toolbar [PoC] new Toolbar Oct 1, 2020
@samdark
Copy link
Member

samdark commented Oct 8, 2020

It is definitely interesting for Yii 3. Will also check if it's suitable for Yii 2. I don't particularly like that JS isn't in the pull request but is served externally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants