nodecg-widget-obs.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<link rel="import" href="../nodecg-toast/nodecg-toast.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="nodecg-widget-obs-controls.html">
<link rel="import" href="nodecg-widget-obs-led.html">

<dom-module id="nodecg-widget-obs">
	<template>
		<style>
			:host {
				display: block;
			}

			#tabs {
				--paper-tabs-selection-bar-color: #5BA664;
				--paper-tabs-selection-bar: {
					border-bottom-width: 5px;
				};
			}

			.tab {
				--paper-tab-ink: #5BA664;
				--paper-tab: {
					padding: 0;
					@apply --layout-horizontal;
					@apply --layout-center;
				};
				--paper-tab-content: {
					border-left: 0.5px solid transparent;
					border-right: 0.5px solid transparent;
					font-size: 16px;
					font-weight: bold;
					min-width: 1px;
					padding: 0 10px;
				};
				--paper-tab-content-unselected: {
					background-color: #E8E8E8;
					border-left: 0.5px solid #E8E8E8;
					border-right: 0.5px solid #E8E8E8;
				}
			}

			.tab-led {
				@apply --layout-flex-none;
			}

			.tab-namespace {
				@apply --layout-flex;
				min-width: 1px;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			paper-tab nodecg-widget-obs-led {
				margin-right: 9px;
			}

			#pages {
				padding: var(--nodecg-widget-obs-padding, 10px);
			}

			[hidden] {
				display: none !important;
			}
		</style>

		<paper-tabs id="tabs" selected="{{selected}}" hidden="[[_lessThan(numNamespaces, 2)]]">
			<template is="dom-repeat" items="[[namespaces]]" as="namespace">
				<paper-tab class="tab">
					<nodecg-widget-obs-led class="tab-led" color="green"></nodecg-widget-obs-led>
					<span class="tab-namespace" title="[[namespace]]">[[namespace]]</span>
				</paper-tab>
			</template>
		</paper-tabs>

		<iron-pages id="pages" selected="[[selected]]">
			<template is="dom-repeat" items="[[namespaces]]" as="namespace">
				<nodecg-widget-obs-controls
					namespace="[[namespace]]"
					on-status-changed="_handleControlsStatusChanged"
					on-connected="_handleControlsConnected"
					on-disconnected="_handleControlsDisconnected"
					on-connection-failure="_handleControlsConnectionFailure">
				</nodecg-widget-obs-controls>
			</template>
		</iron-pages>

		<nodecg-toast id="toast"></nodecg-toast>
	</template>

	<script src="nodecg-widget-obs.js"></script>
</dom-module>