Kitto Comment Widget

README.md

Comment Widget for Kitto

This package includes a widget for displaying comment style text in a dashboard.

Install

1. Install into your dashboard with mix kitto.install --gist ee402159c3c4770ee06f6e12a220cb35
2. Create a job to export data with the following format:

%{
  name: "John Smith",
  screenName: "jsmith658",
  profilePic: "http://placehold.it/50x50",
  text: "Kitto is the best dashboard framework ever!"
}

comment.js

import React from 'react';
import {Widget, Helpers} from 'kitto';

import './comment.scss'

export class Comment extends Widget {
  render() {
    return (
      <div className={this.props.className}>
        <h3 className="title">
          <img className="profile-pic" src={this.state.profilePic || "http://placehold.it/50x50"}/>
          {this.state.name || this.props.title}
        </h3>
        <p className="comment">{this.state.text}</p>
        <p className="more-info">{this.props.moreinfo}</p>
      </div>
    )
  }
}

Widget.mount(Comment);
export default Comment;

comment.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #4099FF;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 1.0);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

.widget-comment {
  background: $background-color;

  img.profile-pic {
    margin-right: 5px;
    border: 1px solid $value-color;
  }

  .title {
    color: $title-color;
    margin-bottom: 15px;
  }

  .comment {
    color: $label-color;
    font-weight: normal;
    font-size: 1rem;
  }

  .more-info {
    color: $moreinfo-color;
  }
}