Merge branch 'metric_explorer' into cockpit (bf705620) · Commits · github_fork / Clip

fnord-webcomponents/components/fn-button-demo.html

+22 −3

Original line number	Diff line number	Diff line
		@@ -40,8 +40,8 @@
		<fn-button data-state='disabled'>Next</fn-button>
		<h3><i>Example 2 »</i> Active</h3>
		<fn-button data-state='active'>Auto Refresh</fn-button>


		<h3><i>Example 3 »</i> Toggle</h3>
		<fn-button data-toggle id="toggle">Off</fn-button>
		</section>


		@@ -90,4 +90,23 @@
		</fn-button-group>
		</div>
		</section>
		<section>
		<h1>Sizes</h1>
		<fn-button data-size='mini'>Mini</fn-button>
		<fn-button data-size='tiny'>Tiny</fn-button>
		<fn-button data-size='small'>Small</fn-button>
		<fn-button data-size='medium'>Medium</fn-button>
		<fn-button data-size='large'>Large</fn-button>
		<fn-button data-size='big'>Big</fn-button>
		</section>
		<script type='text/javascript'>
		document.querySelector("#toggle").addEventListener("fn-button-click", function() {
		if (this.hasAttribute('data-state')) {
		this.removeAttribute('data-state');
		} else {
		this.setAttribute('data-state', 'active');
		}
		}, false);
		</script>
		</template>

fnord-webcomponents/components/fn-button.css

+58 −0

Original line number	Diff line number	Diff line
		@@ -119,8 +119,26 @@ fn-button[data-state='active'],
		box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset;
		}

		/*--------------
		Toggle
		---------------*/


		/* Toggle (Modifies active state to give affordances) */
		fn-button[data-toggle][data-state='active'],
		.fn-button[data-toggle][data-state='active'] {
		background-color: #3b83c0 !important;
		box-shadow: none !important;
		text-shadow: none;
		color: #ffffff !important;
		}
		fn-button[data-toggle][data-state='active']:hover,
		.fn-button[data-toggle][data-state='active']:hover {
		background-color: #458ac6 !important;
		text-shadow: none;
		color: #ffffff !important;
		}

		/*******************************
		Button Groups
		*******************************/
		@@ -158,8 +176,48 @@ fn-button-group[data-split-evenly] {
		width: 100%;
		}

		/*-------------------
		Sizes
		--------------------*/

		.fn-button-group .fn-button[data-size='mini'],
		.fn-button[data-size='mini'],
		fn-button-group fn-button[data-size='mini'],
		fn-button[data-size='mini'] {
		font-size: 0.71428571rem;
		}

		.fn-button-group .fn-button[data-size='tiny'],
		.fn-button[data-size='tiny'],
		fn-button-group fn-button[data-size='tiny'],
		fn-button[data-size='tiny'] {
		font-size: 0.85714286rem;
		}

		.fn-button-group .fn-button[data-size='small'],
		.fn-button[data-size='small'],
		fn-button-group fn-button[data-size='small'],
		fn-button[data-size='small'] {
		font-size: 0.92857143rem;
		}

		.fn-button-group .fn-button,
		.fn-button,
		fn-button-group fn-button,
		fn-button {
		font-size: 1rem;
		}

		.fn-button-group .fn-button[data-size='large'],
		.fn-button[data-size='large'],
		fn-button-group fn-button[data-size='large'],
		fn-button[data-size='large'] {
		font-size: 1.14285714rem;
		}
		.fn-button-group .fn-button[data-size='big'],
		.fn-button[data-size='big'],
		fn-button-group fn-button[data-size='big'],
		fn-button[data-size='big'] {
		font-size: 1.28571429rem;
		}

fnord-webcomponents/components/fn-checkbox.html

+65 −21

Original line number	Diff line number	Diff line
		@@ -64,8 +64,8 @@
		line-height: 1;
		width: 17px;
		height: 17px;
		top: 0;
		left: 0;
		top: -1px;
		left: -1px;
		content: '';
		background: #fff;
		border-radius: .25em;
		@@ -79,7 +79,7 @@
		.field[data-type='checkbox'] label:after {
		position: absolute;
		top: 0;
		left: 0;
		left: 1px;
		line-height: 17px;
		width: 17px;
		height: 17px;
		@@ -93,7 +93,8 @@

		.field[data-active] label:after {
		opacity: 1;
		content: 'x';
		font-family: FontAwesome;
		content: '\f00d';
		}

		.field[data-type='radio'] label:before {
		@@ -112,10 +113,10 @@
		border: none;
		line-height: 14px;
		top: 1px;
		left: 0;
		left: 1px;
		font-size: 9px;
		width: 14px;
		height: 14px;
		width: 15px;
		height: 15px;
		border-radius: 500rem;
		-webkit-transform: scale(0.42857143);
		-ms-transform: scale(0.42857143);
		@@ -137,6 +138,17 @@
		color: #d95c5c;
		}

		.field.small label {
		font-size: 0.9em;
		}

		.field label:after,
		.field[data-type='checkbox'] label:after {
		width: 15px;
		height: 15px;
		}


		</style>

		<div class="field">
		@@ -155,24 +167,13 @@

		if (this.hasAttribute('data-type')) {this.setInputType();}
		if (this.hasAttribute('data-state')) {this.setState();}
		if (this.hasAttribute('data-style')) {this.setStyle();}
		if (this.hasAttribute('data-preselected')) {this.setPreselection(); }

		this.attributeChangedCallback();

		this.addEventListener('click', function() {
		if (this.hasAttribute('data-active')) {
		this.removeAttribute('data-active');
		this.shadowRoot.querySelector(
		".field").removeAttribute("data-active");
		} else {
		this.setAttribute('data-active', 'active');
		this.shadowRoot.querySelector(
		".field").setAttribute('data-active', 'active');
		var ev = new CustomEvent("fn-checkbox-submit", {
		bubbles: true,
		cancelable: true
		});
		this.dispatchEvent(ev);
		}
		this.toggleActiveState();
		}, false);

		};
		@@ -185,11 +186,40 @@
		case 'data-state':
		this.setState();
		break;
		case 'data-preselected':
		this.setPreselection();
		break;
		default:
		break;
		}
		};

		this.toggleActiveState = function() {
		var field = this.shadowRoot.querySelector(".field");

		if (field.hasAttribute('data-active')) {
		this.removeAttribute('data-active');
		this.removeAttribute('data-preselected');
		field.removeAttribute('data-active');

		var ev = new CustomEvent("fn-checkbox-unselect", {
		bubbles: true,
		cancelable: true
		});
		this.dispatchEvent(ev);

		} else {
		this.setAttribute('data-active', 'active');
		field.setAttribute('data-active', 'active');

		var ev = new CustomEvent("fn-checkbox-select", {
		bubbles: true,
		cancelable: true
		});
		this.dispatchEvent(ev);
		}
		}

		this.setInputType = function() {
		var type = this.getAttribute('data-type');
		if (type != null) {
		@@ -204,6 +234,20 @@
		var field = this.shadowRoot.querySelector(".field");
		field.setAttribute('data-state', this.getAttribute('data-state'));
		};

		this.setStyle = function() {
		var field = this.shadowRoot.querySelector(".field");
		field.className += " " + this.getAttribute('data-style');
		};

		this.setPreselection = function() {
		var field = this.shadowRoot.querySelector(".field");
		if (this.getAttribute('data-preselected')) {
		field.setAttribute('data-active', 'active');
		} else {
		field.removeAttribute('data-active');
		}
		}
		};

		window.addEventListener('fn-ready', function() {

fnord-webcomponents/components/fn-controls.html

0 → 100644

+152 −0

Original line number	Diff line number	Diff line
		<!--
		This file is part of the "FnordMetric" project
		Copyright (c) 2014 Laura Schlimmer
		Copyright (c) 2014 Paul Asmuth, Google Inc.

		FnordMetric is free software: you can redistribute it and/or modify it under
		the terms of the GNU General Public License v3.0. You should have received a
		copy of the GNU General Public License along with this program. If not, see
		<http://www.gnu.org/licenses/>.
		-->
		<style>
		fn-controls /deep/ fn-controls-section {
		padding: 0 10px;
		}

		fn-controls /deep/ fn-controls-section[data-position='left'] {
		float: left;
		}

		fn-controls /deep/ fn-controls-section[data-position='right'] {
		float: right;
		}

		fn-controls[type='primary'] /deep/ .controls_inner,
		fn-controls[type='primary-small'] /deep/ .controls_inner {
		margin-top: 5px;
		height: 76px;
		border-top: 2px solid rgb(226, 232, 237);
		border-bottom: 2px solid rgb(226, 232, 237);
		background-color: #f6f8fa;
		color: #60707f;
		overflow: visible;
		}

		fn-controls[type='primary-small'] /deep/ .controls_inner {
		height: 22px;
		padding: 10px 0;
		}

		fn-controls[type='primary'] /deep/ .group,
		fn-controls[type='primary-small'] /deep/ .group {
		float: left;
		padding: 14px 20px 0 20px;
		overflow: visible;
		}

		fn-controls[type='primary'] /deep/ .group b {
		font-weight: normal;
		font-size: 80%;
		line-height: 12px;
		font-weight: 500;
		display: block;
		margin-bottom: 6px;
		opacity: 0.7;
		}

		fn-controls[type='primary'] /deep/ .group.aggregation_type {
		border-right: 1px solid rgb(226, 232, 237);
		}

		fn-controls[type='primary'] /deep/ .group.aggregation_time_window {
		border-right: 1px solid rgb(226, 232, 237);
		}

		fn-controls[type='primary'] /deep/ .group.aggregation_time_window .disabled {
		opacity: 0.5;
		}



		fn-controls[type='primary'] /deep/ .group.group_by fn-button {
		line-height: 28px;
		border: 1px solid #bbb;
		border-radius: 3px;
		padding: 0 8px;
		text-align: center;
		font-size: 12px;
		text-decoration: none;
		background: #fff;
		border: 1px solid #b3c2d0;
		color: #545758;
		height: 28px;
		display: block;
		float: left;
		margin-right: 10px;
		}

		fn-controls[type='primary'] /deep/ .group.group_by fn-button[data-active='active'] {
		background: rgb(226, 232, 237);
		}

		fn-controls[type='secondary'] /deep/ .controls_inner {
		height: 39px;
		margin: 0px;
		line-height:39px;
		border-bottom: 1px solid #dbdedf;
		font-size: 90%;
		padding: 3px 20px;
		text-align: right;
		}

		fn-controls[type='secondary'] /deep/ fn-daterangepicker /deep/ i {
		height: 35px;
		line-height: 35px;
		}



		fn-controls[type='secondary'] /deep/ fn-button /deep/ i {
		position: relative;
		margin-right: 4px;
		}

		fn-controls[type='secondary'] /deep/ fn-button .fa-database {
		font-size: 87%;
		position: relative;
		top: -1px;
		}

		fn-controls[type='secondary'] /deep/ fn-button:first-child {
		color: #009fe9;
		font-weight:500;
		}



		</style>
		<template id="fn-controls-base-tpl">

		<div class="controls_outer">
		<div class="controls_inner">
		<content />
		</div>
		</div>

		</template>

		<script type="text/javascript">
		var ControlsComponent = function() {
		this.createdCallback = function() {
		var shadow = this.createShadowRoot();
		var tpl = Fnord.getTemplate("fn-controls", "base");
		shadow.appendChild(tpl);
		}

		}

		window.addEventListener("fn-ready", function() {
		var controls = Fnord.registerComponent(
		"fn-controls", ControlsComponent);
		}, false);
		</script>

fnord-webcomponents/components/fn-datepicker.html

+4 −5

Original line number	Diff line number	Diff line
		@@ -49,8 +49,7 @@
		}

		fn-input-time {
		margin-left: 41px;
		margin-top: 7px;
		margin: 7px auto;
		display:block;
		}

		@@ -78,6 +77,7 @@
		line-height: 20px;
		text-align:center;
		color: #60707f;
		cursor: default;
		}

		table td.selectable{
		@@ -123,7 +123,6 @@
		var input = this.shadowRoot.querySelector("fn-input");
		var widget = this.shadowRoot.querySelector("#datepicker_widget");


		if (this.hasAttribute('data-timestamp')) {this.setTimeValues();}

		this.attributeChangedCallback();
		@@ -151,6 +150,8 @@
		base.resetDatepicker();
		}, false);



		this.addEventListener('click', function(e) {
		e.stopPropagation();
		});
		@@ -180,13 +181,11 @@
		this.renderTimeInput = function() {
		var widget = this.shadowRoot.querySelector("#datepicker_widget");
		var time_input = document.createElement("fn-input-time");

		var selected_date = this.getSelectedDate();

		time_input.setAttribute('data-hours-value', selected_date.getHours());
		time_input.setAttribute('data-minutes-value', selected_date.getMinutes());
		widget.appendChild(time_input);

		var base = this;

		time_input.addEventListener('fn-input-time-submit', function() {

Admin message