krasimir / kuker

Kick-ass browser extension to debug your apps

Home Page:https://chrome.google.com/webstore/detail/glgnienmpgmfpkigngkmieconbnkmlcn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Kuker formatting of entries (left panel)

brucou opened this issue · comments

@krasimir another question, I grabbed that there is an indent property that can be used to indent labels in the left panel (used in the MobX emitter) You also give one example with icons
I could not however find out what is used to format the label as the stent emitter does. Here you can see that in the same line, some words are bold, and others are not, implying that label is not necessarily just a text.

Do you have at hand a list of the properties used in Kuker and thier semantics?

Many thanks

Hey @brucou,

here's the component that you are interested in https://github.com/krasimir/kuker/tree/master/src/kuker-ui/components/Dashboard/Handlers/UnrecognizedEvent.js

This is how the event looks like on the left:

<div style={ style } onClick={ onClick } className={ className }>
  <TimeDiff timeDiff={ event.timeDiff } parentStyle={ style } />
  <div className='actionRowContent'>
    <i className={ 'fa ' + icon } style={{ marginRight: '0.5em' }}></i>
    <strong>{ label || event.type }</strong>
  </div>
</div>
  • The icon is a font awesome icon label
  • The style is just taking the event's .color prop and is setting is a background.

This is the public API that Kuker offers. There are dedicated components for emitters like Stent and Redux. They are here https://github.com/krasimir/kuker/tree/master/src/kuker-ui/components/Dashboard/Handlers

Absolutely amazing, thanks!