appbar 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6612a37b58834eb45c52f2e78c51ccbc5d170e0a
+  data.tar.gz: 9daa89d4fb4b5aa875ddf5fb98f3d78f2567287d
+SHA512:
+  metadata.gz: 6dfc5cc77469c9151b91ae965a754652db661fd817ae710020064cb003df0b749a81b836d3443b4d529bf75b7dce7d820f4d7d92fad59d9dc588943863ee30c9
+  data.tar.gz: 23475bcd3cbe4a62c054ef6d7f18231f70362371c387dace61a0393e5e248be12970204c014595a6ce062193bd6c00beab10a8744a83c96a2fa9f53e452c0614

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2016 Marcelo Kanzaki
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,11 @@
+= Appbar
+
+This project rocks and uses MIT-LICENSE.
+
+
+== TODO
+
+* Notifications: unseen count in window title
+* Notifications: support making text bold
+* Notifications: app or action icons
+* Support Bootstrap 4

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Appbar'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/appbar/appbar.jsx

@@ -0,0 +1,253 @@
+'use strict';
+
+class Appbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapseId: `collapse-${Math.floor(Math.random() * 0xFFFF)}`,
+    }
+  }
+
+  getAppSwitcher() {
+    return (this.props.appSwitcher.hide) ?
+      <AppSwitcherDisabled {...this.props.appSwitcher} /> :
+      <AppSwitcher {...this.props.appSwitcher} />;
+  }
+
+  render() {
+    return (
+      <nav className={`navbar navbar-default navbar-white navbar-fixed-top`}>
+        <div className="container-fluid">
+          <div className="navbar-header">
+            <button type="button" className="navbar-toggle collapsed" data-target={`#${this.state.collapseId}`} data-toggle="collapse">
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar" />
+              <span className="icon-bar" />
+              <span className="icon-bar" />
+            </button>
+            {this.getAppSwitcher()}
+          </div>
+          <div className="collapse navbar-collapse" id={this.state.collapseId}>
+            <style>{` body { padding-top: ${this.props.padding}px; } `}</style>
+            <AppbarNotifications {...this.props.notifications} />
+            <AppbarUserMenu {...this.props.userMenu} />
+            <div className="appbar-content" dangerouslySetInnerHTML={{__html: this.props.content}} />
+          </div>
+        </div>
+      </nav>
+    );
+  }
+}
+
+Appbar.propTypes = {
+  brand: React.PropTypes.string,
+  brandUrl: React.PropTypes.string,
+  content: React.PropTypes.string,
+  padding: React.PropTypes.number,
+  appSwitcher: React.PropTypes.object,
+  userMenu: React.PropTypes.object,
+  notifications: React.PropTypes.object,
+}
+
+Appbar.defaultProps = {
+  padding: 70,
+  appSwitcher: {},
+  userMenu: {},
+  notifications: {},
+}
+
+// ====
+
+class AppSwitcherDisabled extends React.Component {
+  render() {
+    return (
+      <a className="navbar-brand" href={this.props.brandUrl}>
+        <span className="appbar-sitename">{this.props.siteName}</span>
+        <span className="appbar-brand" style={{color: this.props.brandColor}}>{this.props.brand}</span>
+      </a>
+    );
+  }
+}
+
+// ====
+
+class AppSwitcher extends React.Component {
+  componentDidMount() {
+    let $component = $(ReactDOM.findDOMNode(this));
+    let width = $component.find('.appbar-sitename').width() - 8;
+    $component.find('.appbar-menu-arrow').css({left: width + 'px'});
+  }
+
+  render() {
+    return (
+      <div className="navbar-brand app-switcher">
+        <a href="#" className="dropdown-toggle" data-toggle="dropdown">
+          <span className="appbar-sitename">{this.props.siteName}</span>
+          <span className="appbar-brand" style={{color: this.props.brandColor}}>
+            <span>{this.props.brand} </span>
+            <i className="fa fa-angle-down" />
+          </span>
+        </a>
+
+        <div className="dropdown-menu">
+          <span className="appbar-menu-arrow" />
+          <HomeScreen apps={this.props.apps} />
+        </div>
+      </div>
+    );
+  }
+}
+
+// ====
+
+class HomeScreen extends React.Component {
+  render() {
+    return (
+      <div className="row home-screen">
+        {this.props.apps && this.props.apps.map && this.props.apps.map((props, key) => <HomeScreenApp {...props} key={key} />)}
+      </div>
+    );
+  }
+}
+
+// ====
+
+class HomeScreenApp extends React.Component {
+  render() {
+    return (
+      <div className="home-screen-app col-xs-3 col-sm-2 text-center">
+        <a href={this.props.url}>
+          <img src={this.props.iconUrl} className={`img-responsive center-block ${this.props.iconRounded && 'icon-rounded'} ${this.props.iconBorder && 'icon-border'}`} />
+          <span className="app-name">{this.props.name}</span>
+        </a>
+      </div>
+    );
+  }
+}
+
+HomeScreenApp.defaultProps = {
+  iconBorder: false,
+  iconRounded: true,
+}
+
+// ====
+
+class AppbarUserMenu extends React.Component {
+  render() {
+    if (this.props.hide) return <span />;
+
+    return (
+      <ul className="appbar-user-menu nav navbar-nav navbar-right">
+        <li className="dropdown dropdown-arrow">
+          <a href="#" className="dropdown-toggle" data-toggle="dropdown">
+            <span className="avatar-wrapper">
+              <img src={this.props.avatarUrl} className="avatar" />
+              <span className="visible-xs-inline">{this.props.userName}</span>
+            </span>
+          </a>
+
+          <ul className="dropdown-menu" dangerouslySetInnerHTML={{__html: this.props.items}} />
+        </li>
+      </ul>
+    );
+  }
+}
+
+// ====
+
+class AppbarNotifications extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {notifications: [], unseenCount: 0};
+  }
+
+  componentDidMount() {
+    if ( ! this.props.hide && this.props.url) {
+      this.fetchNotifications();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeoutFn) {
+      clearTimeout(this.timeoutFn);
+    }
+  }
+
+  fetchNotifications() {
+    $.getJSON(this.props.url, notifications => {
+      let unseenCount = notifications.filter(n => !n.seen).length;
+      this.setState({notifications, unseenCount});
+      this.timeoutFn = setTimeout(this.fetchNotifications.bind(this), 30000);
+    });
+  }
+
+  handleDropdownToggle(e) {
+    if (this.state.unseenCount > 0) {
+      let unseenCount = 0;
+      let ids = [];
+      let notifications = this.state.notifications.map(n => {
+        ids.push(n.id);
+        n.seen = true;
+        return n;
+      });
+      $.ajax({method: 'PUT', url: `${this.props.url}/mark_seen`, dataType: 'json', data: {ids: ids}});
+      this.setState({notifications, unseenCount});
+    }
+  }
+
+  render() {
+    if (this.props.hide) return <span />;
+    let unseenCount = this.state.unseenCount;
+    let hasNewClass = unseenCount > 0 ? 'has-unseen animated rubberBand' : '';
+
+    return (
+      <ul className="appbar-notifications nav navbar-nav navbar-right">
+        <li className="dropdown dropdown-arrow">
+          <a href="#" onClick={this.handleDropdownToggle.bind(this)} className={`dropdown-toggle ${hasNewClass}`} data-toggle="dropdown">
+            <span className="icon-wrapper">
+              <i className="fa fa-globe" />
+              <span className="notifications-counter">{unseenCount}</span>
+            </span>
+          </a>
+
+          <div className="dropdown-menu">
+            <div className="notifications-wrapper">
+              {this.state.notifications.map((n, i) => <AppbarNotification notiticatonsUrl={this.props.url} key={i} {...n} />)}
+            </div>
+          </div>
+        </li>
+      </ul>
+    );
+  }
+}
+
+// ====
+
+class AppbarNotification extends React.Component {
+  handleClick() {
+    if ( ! this.props.clicked) {
+      $.ajax({
+        method: 'PUT',
+        url: `${this.props.notiticatonsUrl}/${this.props.id}`,
+        dataType: 'json',
+      });
+    }
+  }
+
+  render() {
+    let unclickedClass = this.props.clicked ? '' : 'unclicked';
+    let date = (typeof moment == 'function') && this.props.date ? moment(this.props.date).fromNow() : this.props.date;
+
+    return (
+      <a href={this.props.url} onClick={this.handleClick.bind(this)} className={`appbar-notification ${unclickedClass} clearfix`}>
+        <span className="media-left">
+          <img className="notification-image" src={this.props.imageUrl} />
+        </span>
+        <span className="media-body">
+          <span>{this.props.message}</span>
+          <div className="notification-date">{date}</div>
+        </span>
+      </a>
+    );
+  }
+}

data/app/assets/javascripts/appbar/index.js

@@ -0,0 +1,3 @@
+//= require react
+//= require react_ujs
+//= require_tree .

data/app/assets/stylesheets/appbar/appbar.scss

@@ -0,0 +1,297 @@
+
+// bootstrap extensions
+
+.navbar .dropdown-arrow .dropdown-toggle {
+  background-color: transparent !important;
+}
+
+.navbar .dropdown-arrow .dropdown-menu {
+  border-radius: 5px !important;
+  top: 120%;
+}
+
+.navbar .dropdown-arrow .dropdown-menu:before {
+  position: absolute;
+  top: -8px;
+  right: 9px;
+  display: inline-block;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid #ccc;
+  border-left: 8px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, .2);
+  content: '';
+}
+
+.navbar .dropdown-arrow .dropdown-menu:after {
+  position: absolute;
+  top: -7px;
+  right: 10px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #fff;
+  border-left: 7px solid transparent;
+  content: '';
+}
+
+.navbar-white { background-color: white; }
+
+
+// appbar
+
+.appbar-content .navbar-right { margin-right: 0; }
+
+.appbar-sitename {
+  font-weight: bold;
+  color: black;
+  margin-right: 4px;
+}
+
+.appbar-menu-arrow {
+  position: absolute;
+  top: -10px;
+  left: 10px;
+
+  &:before { /* arrow shadow */
+    content: '';
+    display: inline-block;
+    position: absolute;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #ccc;
+    border-left: 10px solid transparent;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+  }
+
+  &:after { /* white arrow */
+    content: '';
+    display: inline-block;
+    position: absolute; top: 1px; left: 1px;
+    border-right: 9px solid transparent;
+    border-bottom: 9px solid #FFF;
+    border-left: 9px solid transparent;
+  }
+}
+
+
+// Home Screen
+
+.home-screen-app {
+  margin: 24px 0;
+
+  a {
+    position: relative;
+
+    &:hover, &:focus { text-decoration: none; }
+    &:active img { opacity: .8; }
+  }
+
+  img {
+    margin-bottom: 12px;
+    max-width: 70%;
+    z-index: 99;
+
+    &.icon-border  { border: 1px solid rgba(0, 0, 0, .15); }
+    &.icon-rounded { border-radius: 23%; }
+  }
+
+  .app-name {
+    color: #333;
+    font-size: 14px;
+    white-space: nowrap;
+    text-align: center;
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+  }
+}
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+  .home-screen-app .app-name { font-size: 16px; }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  .home-screen-app .app-name { font-size: 16px; }
+}
+
+
+// app switcher
+
+.app-switcher {
+  .dropdown-toggle {
+    color: inherit;
+    white-space: nowrap;
+
+    &:hover, &:focus {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  .dropdown-menu {
+    top: 90%;
+    left: 15px;
+    max-width: 876px;
+    border-radius: 10px;
+  }
+}
+
+
+// home screen app adjustments
+
+.app-switcher {
+  .home-screen {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    margin: 0 5px;
+    padding: 15px 10px;
+  }
+
+  .home-screen-app {
+    margin: 10px 0;
+    padding: 0;
+    width: 120px;
+
+    .app-name { font-size: 13px; }
+
+    img {
+      max-width: 60%;
+      margin-bottom: 7px;
+    }
+  }
+}
+
+
+// user menu
+
+.navbar-fixed-top,
+.navbar-fixed-botom {
+  .appbar-user-menu { margin-right: 0; }
+}
+
+.appbar-user-menu {
+  .dropdown-toggle {
+    padding: 0;
+    margin: 9px 8px 0;
+  }
+
+  .dropdown-arrow .dropdown-menu:before { right: 16px; }
+  .dropdown-arrow .dropdown-menu:after  { right: 17px; }
+
+  .avatar-wrapper {
+    display: block;
+    position: relative;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+
+    &:before {
+      display: block;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
+      border-radius: 5px;
+    }
+  }
+
+  .avatar {
+    border-radius: 4px;
+    width: 32px;
+    height: 32px;
+  }
+}
+
+
+// notifications
+
+.navbar-fixed-top,
+.navbar-fixed-botom {
+  .appbar-notifications { margin-right: 0; }
+}
+
+.appbar-notifications {
+  .dropdown-toggle {
+    padding: 0;
+    margin: 14px 10px 0;
+    text-align: center;
+  }
+
+  .dropdown-arrow .dropdown-menu:before { right: 19px; }
+  .dropdown-arrow .dropdown-menu:after  { right: 20px; }
+
+  .icon-wrapper {
+    -webkit-background-clip: padding-box;
+    border-radius: 10px;
+    width: 36px;
+    display: block;
+  }
+
+  .fa { font-size: 160%; }
+
+  .notifications-counter {
+    -webkit-font-smoothing: subpixel-antialiased;
+    display: none;
+    font-size: 82%;
+  }
+
+  .has-unseen {
+    .icon-wrapper {
+      background-color: #dc0d17;
+      background-image: -webkit-linear-gradient(#fa3c45, #dc0d17);
+      background-image: linear-gradient(#fa3c45, #dc0d17);
+      color: #fff;
+      line-height: 1;
+      padding: 3px 5px 4px;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
+    }
+
+    .fa {
+      margin-right: 3px;
+      font-size: 110%;
+    }
+
+    .notifications-counter { display: inline; }
+  }
+
+  .notifications-wrapper {
+    width: 430px;
+    height: 270px;
+    overflow-y: auto;
+  }
+}
+
+.appbar-notification {
+  background: #fff;
+  border-bottom: 1px solid #ddd;
+  padding: 6px 8px;
+  color: inherit;
+  font-size: 13px;
+  line-height: 1.3;
+  white-space: normal;
+  display: block;
+
+  &:hover {
+    color: inherit;
+    background-color: #f5f5f5;
+    text-decoration: none;
+  }
+
+  .notification-image {
+    height: 50px;
+    width: 50px;
+  }
+
+  .notification-date {
+    color: #999;
+    font-size: 12px;
+    margin-top: 2px;
+  }
+
+  &.unclicked {
+    background: #E9F4FF;
+    &:hover { background-color: #DDEEFF; }
+  }
+}