Element
This is a cross platform status bar built on electron.
Installation
# Install element-status
[sudo] npm i -g element-status
# Start the status bar
element
Screenshot
Configuration
~/.config/element/
├── config.yml # Window and widget configuration
├── stylesheets/ # Custom styles using .less
└── widgets/ # Custom widgets for displaying various information
Example config.yaml
config.yml
should be placed into your element configuration folder.
Stylesheets
~/.config/element/stylesheets/
├── main.less
└── widget.less
All .less
stylesheets in this directory will be loaded in the status bar alphabetically.
Widgets are added to the .bar
div element. To get a view of the markup you can run
element dev
to start element with the devTools (chrome console) open.
Widgets
~/.config/element/widgets/
└── date.coffee
All widgets added to the widgets directory will be available to element. Widget files
will not be executed until they are added to the elements array in config.yml
To learn how to create widgets, we'll walk through an example:
# date.coffee
# The Widget parent class is included in all widgets.
Widget = requireCoffee("#{widgets}/widget.coffee")
# require whatever modules your widget might need.
# modules from your home directory can be required with:
# module = require("#{@homePath}/node_modules/module")
# modules from your `~/.config/element/` directory can be required with:
# module = require("#{@configPath}/node_modules/module")
$ = require("jquery")
strftime = require('strftime')
module.exports =
class BarDate extends Widget
# required
constructor: ->
# The string passed to super must match the name of your widget in the
# config.yml. This will make your widget's config available in @config.
# The window configuration from config.yml will be available in @window
super("date")
# This method will be called once immediately, and once after every
# @config.refresh milliseconds
update: =>
super("date")
$(".date").html @date()
# required
# This is the markup for your widget. The constructor will ensure that this
# element gets appended to the .bar element
element: =>
"""
<div class="date" style="#{@style()}"></div>
"""
# In this example, style is a css string that will be loaded as an inline
# style for the .date element.
style: =>
"""
height: #{@window.size.height}px !important;
line-height: #{@window.size.height}px !important;
"""
# Method for retrieving/formatting the date.
date: ->
strftime(@config.format, new Date())