@tririga/tri-template/lib/templates/responsive-app/@element-details.html

A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.

<dom-module id="@element-details">
	<template>
		<style include="shared-page-styles">
			:host {
				@apply(--layout-vertical);
			}

			.page-header {
				background-color: var(--ibm-neutral-2);
			}

			:host([small-screen]) .page-header {
				background-color: var(--tri-header-color);
				padding: 5px 10px 5px 10px;
			}
			
			:host(:not([small-screen])) .detail-page-content {
				@apply(--layout-flex);
				@apply(--layout-horizontal);
			}

			:host([small-screen]) .detail-page-content {
				@apply(--layout-vertical);
			}

			.action-bar {
				@apply(--layout-horizontal);
			}

			:host([small-screen]) .action-bar {
				background-color: var(--tri-footer-background-color);
				color: var(--tri-footer-color);
				width: 100%;
				padding: 5px;
				@apply(--layout-center-center);
				@apply(--layout-fixed-bottom);
				z-index: 102;
			}

			.detail-page-left-panel {
				@apply(--layout-vertical);
				flex-shrink: 0;
				padding: 17px 20px 0px 20px;
			}

			.detail-page-right-panel {
				padding: 17px 20px 20px 20px;
				background-color: var(--tri-primary-content-background-color);
				@apply(--layout-vertical);
			}

			:host([small-screen]) .detail-page-left-panel, .detail-page-right-panel {
				padding: 10px;
			}

			:host([small-screen]) .detail-page-right-panel {
				flex-shrink: 0;
				border-top: 1px solid var(--ibm-gray-10);
			}

			:host([small-screen]) .detail-page-right-panel::after {
				content: "";
				padding-bottom: 55px;
			}

			:host(:not([small-screen])) .detail-page-right-panel {
				@apply(--layout-flex);
			}			

			paper-button {
				margin: 0px;
				height: 44px;
				width: 90px;
				border-width: 2px !important;
			}

			:host([small-screen]) paper-button {
				border: 2px solid var(--tri-footer-color);
			}

			.thumbnail {
				cursor: pointer;
				width:80px; 
				height:80px;
			}

		</style>

		<triplat-route id="detailRoute" name="detail" params="{{_params}}"></triplat-route>

		<div class="page-header">
			<div class="header-text tri-h2" hidden$="[[smallScreen]]">Record Detail</div>
			<div class="action-bar">
				<paper-button on-tap="_onSubmit">Submit</paper-button>
			</div>
		</div>

		<triblock-responsive-layout class="detail-page-content">
			<div class="detail-page-left-panel">
				<paper-input label="Status" readonly value="[[_record.status]]"></paper-input>
				<paper-input label="Name" value="{{_record.name}}"></paper-input>
			</div>
			<div class="detail-page-right-panel">
				<paper-textarea label="Detail" value="{{_record.detail}}"></paper-textarea>
				<label>Image:</label>
				<iron-image class="thumbnail" sizing="contain"
						src="images/tririga.jpg" on-tap="_handleImageTap"></iron-image>
			</div>
		</triblock-responsive-layout>

		<triblock-popup id="imageDialog" with-backdrop="[[!smallScreen]]">
			<iron-image id="ironImageDialog" sizing="contain" src="images/tririga.jpg"></iron-image>
		</triblock-popup>

	</template>
</dom-module>

<script>
	Polymer({

		is: "@element-details",

		behaviors: [
			TriBlockViewResponsiveBehavior
		],

		properties: {
			_params: {
				type: Object,
				observer: "_onParamsChanged"
			},

			_record: {
				type: Object
			}
		},

		_onSubmit: function() {
			this.fire("submit-detail", {"record": this._record});
		},

		_handleImageTap: function() {
			if (this.smallScreen) {
				this.$.ironImageDialog.width = window.innerWidth-60;
				this.$.ironImageDialog.height = window.innerHeight-60;
			} else {
				this.$.ironImageDialog.width = window.innerWidth/2;
				this.$.ironImageDialog.height = window.innerHeight/2;
			}
			this.$.imageDialog.openPopup();
		},

		_onParamsChanged: function(newParams, oldParams) {
			this._record = this._getRecord(newParams.id);
		},

		_getRecord: function(id) {
			var record = {};
			record._id = id;
			record.name = "Name 00000" + id;
			record.detail = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae fringilla turpis. Morbi sollicitudin ultrices erat, vitae finibus ipsum condimentum et. Aliquam fringilla odio mauris, ut tempus arcu aliquet ut.\n Pellentesque sollicitudin tristique lacus non consequat. Quisque odio sem, porttitor quis metus pellentesque, ultrices finibus tellus. Nullam a ligula mattis, tristique sapien ac, consequat lorem. In quis gravida elit. Vivamus in tellus lorem. Vestibulum eu mollis tortor.\n Praesent rutrum lacus nisi, eget suscipit diam tincidunt ut. Donec ac dui at quam tempor consectetur sit amet quis tortor. Aenean ex lacus, mollis eu pulvinar et, accumsan eu ante. Maecenas vel turpis tristique, malesuada eros quis, posuere tellus. Duis metus metus, congue ullamcorper libero sed, bibendum tempor ipsum.";
			switch(id) {
				case "1":
					record.status = "Active";
					break;
				case "2":
					record.status = "Draft";
					break;
				case "3":
					record.status = "Active";
					break;
			}
			return record;
		}

	});
</script>