Demo Section

Each variation will be presented in the following section.

Default

Readme

toolboxWorkspace (`component`)

Description

This blueprint is based on the blueprint of Veams.

Requirements

Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/toolbox-workspace

Fields

`toolbox-workspace.hbs`

Settings

Parameter	Type	Default	Description
settings.toolboxWorkspaceClasses	String	`''`	Modifier classes for component
settings.toolboxWorkspaceContextClass	String	`'default'`	Context class of component
settings.toolboxWorkspaceJsOptions	Object	`null`	JavaScript options object which gets stringified

Content

Parameter	Type	Description
content.toolboxWorkspaceField	String	Please add a description!

JavaScript Options

The module gives you the possibility to override default JS options:

Option	Type	Default	Description
optionOne	String	`'is-option'`	Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable	Value	Description
$toolbox-workspace-my-custom-var	`0px`	Please add a description!

Modifier Classes

There are modifier classes you can add to c-toolbox-workspace:

Modifier	Description
is-modifier	Please add a description!

Templates

toolbox-workspace.hbs

<!--
	// TODO: This is old production configuration.
		Tokenservice subdomin is deprecaded and after new version update it is going to remove from application
	idp: {
		baseURL : 'https://tokenservice.lmu.de',
		tokenUrl: "/token?for=https://workspace-api.lmu.de",
		loginUrl: "/sso/Login?returnTo=https://www.lmu.de",
		logoutUrl: "/sso/Logout"
	},
	api: {
		baseURL : 'https://workspace-api.lmu.de/api/workspace',
	},
-->

<!--
	New prod congigurations like this:
	There are no need for tokeUrl and logout url anymore.
	idp: {
		baseURL : 'https://www.lmu.de',
		loginUrl: "/sp/Login?returnTo=https://www.lmu.de",
	},
	api: {
		baseURL : 'https://www.lmu.de/api/workspace',
	},
-->

<div class="c-toolbox-workspace--default" data-css="c-toolbox-workspace">
	<div id="workspace-app"></div>
</div>



<script type="text/javascript">
	$(function() {
			LmuWorkspace.init({
				config: {
					idp: {
						baseURL : 'http://localhost:8080/workspace-api-gw/workspace',
						loginUrl: "/sso/Login?returnTo=http://localhost:3000/toolbox-workspace.html",
					},
					api: {
						baseURL : 'http://localhost:8080',
					},
					error: {
						addItemErrorMessage : 'Cannot add toolbox data to user documnet',
						notLoggedInErrorMessage: 'Please login to www.lmu.de'
					},
					data: {
						title: "Your Toolbox",
						titleLogged: "My Toolbox",
						text: "Set up your personal digital workspace: This area will provide you with access to lots of different tools required while you study. After a simple registration process, you will be able to log in and tailor your workspace to include your tools of preference — add and delete functionality as you wish.",
						addButtonText: 'Add Tool',
						loginButtonText: 'Login',
						addModalTitle: 'Add Tool to your profile',
						formInfoText: 'Die mit <span>*</span> gekennzeichneten Felder sind Pflichtfelder',
						formTexts: {
							submitText: 'Save',
							name: 'Name',
							url: "URL",
							shortName: 'Alias'
						},
						errorTitle: 'Http Error',
						closeText: 'Close',
						moreText: 'to open click',
						deleteText: 'Delete Tool',
						confirmMessage: 'Are you sure delete the "{0}" toolbox?',
						staticToolboxes: [
						{
							static: true,
							name: "Benutzerkonto",
							url: "http://www.lmu.de",
							shortName: "BK",
							description: "User account Using your LMU user account, you can manage your user data, change your password, configure your email settings or subscribe to LMU’s email newsletter (LMU Infodienst), which allows you to receive information about news and events at LMU."
						},
						{
							static: true,
							name: "Mailbox All LMU students have a mailbox with 0.5 GB Mailbox All LMU students have a mailbox with 0.5 GB",
							url: "http://www.lmu.de",
							shortName: "MB",
							description: "Mailbox All LMU students have a mailbox with 0.5 GB of storage space for you to use throughout the duration of your studies."
						},
						{
							static: true,
							name: "LSF",
							url: "http://www.lmu.de",
							shortName: "LSF",
							description: "LSF: online course catalog Via LSF, you can easily sign up for courses, compile your timetable and download course materials."
						},
						{
							static: true,
							name: "Moodle",
							url: "http://www.lmu.de",
							shortName: "M",
							description: "Moodle: e-learning platform Moodle is a flexible learning platform to support e-learning activities at LMU — where teachers and students work together in virtual course rooms."
						},
						{
							static: true,
							name: "Cloudprinting",
							url: "http://www.lmu.de",
							shortName: "CP",
							description: "Cloud printing Cloud Printing is a cloud service that makes it easy to store and print documents."
						},
						{
							static: true,
							name: "UB Online-Katalog",
							url: "http://www.lmu.de",
							shortName: "UBO",
							description: "UB online catalog (OPAC)"
						},
						{
							static: true,
							name: "UB E-Medien-Login",
							url: "http://www.lmu.de",
							shortName: "UBE",
							description: "UB e-media login Expect to receive free access to journals, databases, e-books and other e-media when you log in here."
						},
						{
							static: true,
							name: "Online-Selbstbedienungsfunktionen der Studentenkanzlei",
							url: "https://qissos.verwaltung.uni-muenchen.de/qisserversos/rds?state=user&amp;type=1&amp;category=auth.login&amp;startpage=portal.vm",
							shortName: "OSS",
							description: ""
						},
					]
					}
				},
				container: 'workspace-app'
			});

	})
</script>




<!--
<div class="c-toolbox-workspace{{#if settings.toolboxWorkspaceContextClass}}--{{settings.toolboxWorkspaceContextClass}}{{else}}--default{{/if}}{{#if settings.toolboxWorkspaceClasses}} {{settings.toolboxWorkspaceClasses}}{{/if}}"
     data-css="c-toolbox-workspace"

     data-js-module="toolbox-workspace"{{#if settings.toolboxWorkspaceJsOptions}}
     data-js-options='{{stringify settings.toolboxWorkspaceJsOptions}}'{{/if}}>

	<div class="grid__container" data-css="c-toolbox-button" data-js-module="toolbox-modal">
		<div class="grid__row">
			<h2 class="toolbox-workspace__headline">Deine Toolbox</h2>
			<p class="toolbox-workspace__text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu dui, porttitor eu eros eu, accumsan faucibus diam. Aliquam feugiat nulla ac suscipit rhoncus. Etiam vitae massa eros. Sed tempor ligula ac felis interdum, id ullamcorper est tempor. Etiam vehicula, erat ut posuere vehicula, libero erat volutpat elit, at lobortis lectus nibh at libero. Nunc luctus nunc ac sapien venenatis malesuada. Proin vel sapien enim. Morbi ullamcorper hendrerit ultricies.
			</p>
		</div>
		<div class="grid__row">
			<div class="grid__col is-col-tablet-p-6 m-t-s">
				<div class="toolbox-button__wrapper">
					<div class="toolbox-button__left-wrapper">
						<div class="toolbar-button--title">
							<span>DKP</span>
						</div>
						<div class="toolbar-button__arrow-icon"></div>
						<span class="toolbar-button__arrow-text">LMU Raumfinder</span>
					</div>
					<div class="toolbox-button__info-wrapper" data-css="c-popover" data-js-module="popover">
						<div data-js-item="toggle-popover" class="toolbox-button__icon-info">i</div>
						<div class="popover">
							<div class="popover__wrapper">
								<button data-js-item="toggle-popover" class="popover__close">Schließen</button>
								<div class="popover__content">
									<h1>Deine Mailbox</h1>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Id pariatur voluptatibus reiciendis commodi, labore officiis eveniet totam sequi minus illum. Odit nulla nihil mollitia, veritatis et voluptatibus ducimus iure cupiditate.
									</p>
								</div>
								<div class="popover__footer">
									<div class="popover__footer-link-container">
										<a href="#" class="popover__footer-link is-more">mehr erfahren</a>
									</div>
									<div class="popover__footer-link-container">
										<a href="javascript:void(0)" data-js-item="delete-item" class="popover__footer-link is-delete">Tool löschen</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="grid__col is-col-tablet-p-6 m-t-s">
				<div class="toolbox-button__wrapper">
					<div class="toolbox-button__left-wrapper">
						<div class="toolbar-button--title">
							<span>DKP</span>
						</div>
						<div class="toolbar-button__arrow-icon"></div>
						<div class="toolbar-button__arrow-text">Dein Virtueller Projecktraum</div>
					</div>
					<div class="toolbox-button__info-wrapper">
						<div class="toolbox-button__icon-info">i</div>
					</div>
				</div>
			</div>
		</div>
		<div class="grid__row">
			<div class="grid__col is-col-tablet-p-6 m-t-s">
				<div class="toolbox-button__wrapper">
					<div class="toolbox-button__left-wrapper">
						<div class="toolbar-button--title">
							<span>DKP</span>
						</div>
						<div class="toolbar-button__arrow-icon"></div>
						<span class="toolbar-button__arrow-text">LSF: Deine Forshung</span>
					</div>
					<div class="toolbox-button__info-wrapper">
						<div class="toolbox-button__icon-info">i</div>
					</div>
				</div>
			</div>
			<div class="grid__col is-col-tablet-p-6 m-t-s" data-css="c-add-button">
				<a href="javascript:void(0)" data-js-item="open-modal">
					<div class="add-button__wrapper">
						<div class="add-button__content-wrapper">
							<div class="add-button--title">
								<span>+</span>
							</div>
							<div class="add-button--content">
								<div class="add-button__content-link">Tool hinzufügen</div>
							</div>
						</div>

					</div>

				</a>
			</div>
		</div>


		<div data-css="c-toolbox-modal">
			<div class="modal">
				<div class="add-toolbox--modal">
					<div class="grid__container">
						<div class="grid__row">
							<div class="add-toolbox__content">
								<div class="add-toolbox__header">
									<h2 class="add-toolbox__headline">Tool hinzufugen</h2>
									<span data-js-item="close-modal" class="close">&times;</span>
								</div>
								<form class="c-form--default is-form is-error" method="POST"
									  data-css="c-form" data-js-module="form-ajax">
									<div class="form__row">
										<div class="form__col is-grid-col is-col-tablet-p-12">
											<div class="form__radio">
												<div class="form__radio-wrapper">
													<ul class="form__radio-list">
														<li class="form__radio-item">
															<input id="radio-01" name="radio" type="radio" value="radio-01" checked="checked" class="form__radio-input">
															<label role="button" for="radio-01" class="form__radio-label">
																Radiobutton aktiv
															</label>
														</li>
														<li class="form__radio-item">
															<input id="radio-02" name="radio" type="radio" value="radio-02" class="form__radio-input">
															<label role="button" for="radio-02" class="form__radio-label">
																Radiobutton passiv
															</label>
														</li>
														<li class="form__radio-item">
															<input id="radio-03" name="radio" type="radio" value="radio-03" class="form__radio-input">
															<label role="button" for="radio-03" class="form__radio-label">
																Radiobutton passiv
															</label>
														</li>

													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="form__row">
										<div class="form__col is-col-tablet-p-12">

											<p class="add-toolbox-info__text">
												Die mit <span>*</span> gekennzeichneten Felder sind Pflichtfelder
											</p>

										</div>
									</div>
									<div class="form__row">
										<div class="form__col is-grid-col is-col-tablet-p-4">
											<div class="form__input">
												<div class="form__label-wrapper">
													<label for="url" class="form__input-label">
														URL  <abbr title="Required">*</abbr>
													</label>
												</div>
												<div class="form__input-wrapper">
													<input id="url" name="url" type="url" placeholder="http://www.lmu.de/" required="required" class="form__input-text">
												</div>
											</div>
										</div>
										<div class="form__col is-grid-col is-col-tablet-p-4">
											<div class="form__input">
												<div class="form__label-wrapper">
													<label for="text1" class="form__input-label">
														Name  <abbr title="Required">*</abbr>
													</label>
												</div>
												<div class="form__input-wrapper">
													<input id="text1" name="name" type="text" required="required" class="form__input-text">
												</div>
											</div>
										</div>
										<div class="form__col is-grid-col is-col-tablet-p-4">
											<div class="form__input">
												<div class="form__label-wrapper">
													<label for="shorname" class="form__input-label">
														Namenskürzel
													</label>
												</div>
												<div class="form__input-wrapper">
													<input id="shorname" name="shortname" type="text"  class="form__input-text">
												</div>
											</div>
										</div>
									</div>
									<div class="form__row ">
										<div class="form__col is-grid-col is-col-tablet-p-12">
											<button type="submit" class="form__submit">
												<span class="from_submit-arrow"></span>
												<span class="form__submit-text">Speichern</span>
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>


			</div>
		</div>



	</div>


	<br>
	<br>

</div>


-->

Data File

toolbox-workspace.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"toolboxWorkspaceContextClass": "default",
				"toolboxWorkspaceClasses": "",
				"toolboxWorkspaceJsOptions": {}
			},
			"content": {}
		}
	}
}

Styles

toolbox-workspace.scss

/* ===================================================
component: toolbox-workspace
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-toolbox-workspace"] {
	.toolbox-workspace__headline {
		@include headline-h2-styles();
		font-family: $font-bold;
		color: $color-dark;
		font-weight: 700;

		margin-bottom: 30px;

		@include bp($bp-tablet-p) {
			margin-bottom: 28px;
		}

		@include bp($bp-desktop-m) {
			margin-bottom: 32px;
		}
	}

	.toolbox-workspace__teasertext {
		p {
			font-family: $font-regular;
			font-size: 1.5rem;
			line-height: (22/15);
			letter-spacing: 0.25px;
			color: $color-dark;
			margin-bottom: 25px;

			@include bp($bp-desktop-m) {
				font-size: 1.6rem;
				line-height: (24/16);
				margin-bottom: 30px;
			}
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-toolbox-workspace--default {
	margin-bottom: 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}
	// Conatiner
	.toolbox-workspace__container {
		.toolbox-workspace__grid {
			.toolbox-workspace__row {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.toolbox-workspace__col {
					margin-bottom: 1rem;
					display: flex;
					justify-content: space-between;
					width: 100%;

					@include bp($bp-tablet-p) {
						width: 49.5%;
					}
				}
			}

			.toolbox-button__wrapper {
				background: #f5f5f5;
				width: $toolbox-button-mobile-w;
				height: $toolbox-button-mobile-h;
				color: #f5f5f5;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.toolbox-button__left-wrapper {
					display: flex;
					justify-content: start;
					align-items: center;

					.toolbar-button--title {
						background: #232323;
						width: 54px;
						height: 54px;
						color: $color-white;
						display: flex;
						justify-content: center;
						align-items: center;

						span {
							font-family: Roboto-Bold;
							font-size: 16px;
							color: #ffffff;
							letter-spacing: 0.3px;
							text-align: center;
						}
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.toolbax-button--content {
						position: relative;
						display: flex;
						padding-left: 1rem;
						align-content: center;

						width: 19.3rem;

						@include bp($bp-mobile-p) {
							width: 31.3rem;
						}

						@include bp($bp-tablet-p) {
							width: 22.3rem;
						}

						@include bp($bp-tablet-l) {
							width: 33.3rem;
						}

						@include bp($bp-desktop-m) {
							width: 44.3rem;
						}

						@include bp($bp-desktop-l) {
							width: 51rem;
						}
						.toolbar-button__arrow-icon {
							@include sprites-icon-arrow-green100();
							transition: transform $animation-duration-std
								$animation-easing-std;
							margin-top: 3px;
						}

						.toolbar-button__arrow-text {
							text-decoration: none;
							font-size: 15px;
							color: $color-green;
							letter-spacing: 0.28px;
							line-height: 22px;
							font-family: $font-bold;

							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-left: 10px;
						}
					}
				}

				.toolbox-button__info-button {
					background: $color-green;
					width: 25px;
					height: 25px;
					text-align: center;
					cursor: pointer;
					margin-right: 1rem;
					color: $color-white;
					font-weight: bold;

					display: flex;
					justify-content: center;
					align-items: center;
				}

				button {
					border: 0;
					background: transparent;
					cursor: pointer;
				}

				button:focus {
					outline: 0;
				}
			}
		}

		.toolbox-workspace__login-button {
			display: flex;
			justify-content: flex-end;
			border-top: 1px solid #e6e6e7;
			margin-top: 40px;
		}
	}

	// LOAD INIT LOADER

	.toolbox-workspace__loader-container {
		display: flex;
		justify-content: center;
		align-items: center;

		.toolbox-workspace__loader {
			position: absolute;
			display: flex;
			width: 200px;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-color: $color-white;
			height: 60px;
			pointer-events: none;
			opacity: 0;
			transition: opacity $animation-duration-std $animation-easing-std;
			z-index: 100;
			border: 1px solid $color-green;

			&.is-loading {
				transform: translate3d(0, 50%, 0);
				opacity: 100;
				margin: 0 auto;
			}
		}
		.toolbox-workspace__loader-box {
			display: block;
			margin: 10px;
			border: 1em solid $color-green;
			opacity: 0;

			/*
			MODIFIERS
			----------------------- */
			&.is-one {
				animation: boxAppear 2s linear infinite;
			}

			&.is-two {
				animation: boxAppear 2s linear 0.3s infinite;
			}

			&.is-three {
				animation: boxAppear 2s linear 0.62s infinite;
			}
		}
	}
}

Scripts

toolbox-workspace.js

/**
 * Description of ToolboxWorkspace.
 * Class properties and decorators are supported.
 *
 * @module ToolboxWorkspace
 * @version v1.0.0
 *
 * @author your_name
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class ToolboxWorkspace extends Component {
	/**
	* Class Properties
	*/
	$el = $(this.el);

    /**
     * Event & subscribe handling
     */

	// Local Handlers
    get events() {
        return {
            'click': 'handleClick'
        };
    }

	handleClick = (evt, target) => {
        console.log(`You clicked on: `, target);
        console.log('You got the following event: ', evt);
	};

	// Global Handlers
    get subscribe() {
        return {
            '{{context.EVENTS.resize}}': 'handleResize'
        };
    }

	handleResize = () => {
		console.log(`Browser was resized and catched by ToolboxWorkspace!`);
	};

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {},
			classes: {}
		};

		super(obj, options);
	}

	/**
	* Lifecycle Hooks
	*/
	willMount() {
		console.log('Component ToolboxWorkspace will mount!');
	}

	didMount() {
		console.log('Component ToolboxWorkspace mounted!');
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default ToolboxWorkspace;

HTML Output

Default

<!--
	// TODO: This is old production configuration.
		Tokenservice subdomin is deprecaded and after new version update it is going to remove from application
	idp: {
		baseURL : 'https://tokenservice.lmu.de',
		tokenUrl: "/token?for=https://workspace-api.lmu.de",
		loginUrl: "/sso/Login?returnTo=https://www.lmu.de",
		logoutUrl: "/sso/Logout"
	},
	api: {
		baseURL : 'https://workspace-api.lmu.de/api/workspace',
	},
-->
<!--
	New prod congigurations like this:
	There are no need for tokeUrl and logout url anymore.
	idp: {
		baseURL : 'https://www.lmu.de',
		loginUrl: "/sp/Login?returnTo=https://www.lmu.de",
	},
	api: {
		baseURL : 'https://www.lmu.de/api/workspace',
	},
-->
<div class="c-toolbox-workspace--default" data-css="c-toolbox-workspace">
	<div id="workspace-app"></div>
</div>
<script type="text/javascript">
	$(function() {
		LmuWorkspace.init({
			config: {
				idp: {
					baseURL: 'http://localhost:8080/workspace-api-gw/workspace',
					loginUrl: "/sso/Login?returnTo=http://localhost:3000/toolbox-workspace.html",
				},
				api: {
					baseURL: 'http://localhost:8080',
				},
				error: {
					addItemErrorMessage: 'Cannot add toolbox data to user documnet',
					notLoggedInErrorMessage: 'Please login to www.lmu.de'
				},
				data: {
					title: "Your Toolbox",
					titleLogged: "My Toolbox",
					text: "Set up your personal digital workspace: This area will provide you with access to lots of different tools required while you study. After a simple registration process, you will be able to log in and tailor your workspace to include your tools of preference — add and delete functionality as you wish.",
					addButtonText: 'Add Tool',
					loginButtonText: 'Login',
					addModalTitle: 'Add Tool to your profile',
					formInfoText: 'Die mit <span>*</span> gekennzeichneten Felder sind Pflichtfelder',
					formTexts: {
						submitText: 'Save',
						name: 'Name',
						url: "URL",
						shortName: 'Alias'
					},
					errorTitle: 'Http Error',
					closeText: 'Close',
					moreText: 'to open click',
					deleteText: 'Delete Tool',
					confirmMessage: 'Are you sure delete the "{0}" toolbox?',
					staticToolboxes: [{
							static: true,
							name: "Benutzerkonto",
							url: "http://www.lmu.de",
							shortName: "BK",
							description: "User account Using your LMU user account, you can manage your user data, change your password, configure your email settings or subscribe to LMU’s email newsletter (LMU Infodienst), which allows you to receive information about news and events at LMU."
						},
						{
							static: true,
							name: "Mailbox All LMU students have a mailbox with 0.5 GB Mailbox All LMU students have a mailbox with 0.5 GB",
							url: "http://www.lmu.de",
							shortName: "MB",
							description: "Mailbox All LMU students have a mailbox with 0.5 GB of storage space for you to use throughout the duration of your studies."
						},
						{
							static: true,
							name: "LSF",
							url: "http://www.lmu.de",
							shortName: "LSF",
							description: "LSF: online course catalog Via LSF, you can easily sign up for courses, compile your timetable and download course materials."
						},
						{
							static: true,
							name: "Moodle",
							url: "http://www.lmu.de",
							shortName: "M",
							description: "Moodle: e-learning platform Moodle is a flexible learning platform to support e-learning activities at LMU — where teachers and students work together in virtual course rooms."
						},
						{
							static: true,
							name: "Cloudprinting",
							url: "http://www.lmu.de",
							shortName: "CP",
							description: "Cloud printing Cloud Printing is a cloud service that makes it easy to store and print documents."
						},
						{
							static: true,
							name: "UB Online-Katalog",
							url: "http://www.lmu.de",
							shortName: "UBO",
							description: "UB online catalog (OPAC)"
						},
						{
							static: true,
							name: "UB E-Medien-Login",
							url: "http://www.lmu.de",
							shortName: "UBE",
							description: "UB e-media login Expect to receive free access to journals, databases, e-books and other e-media when you log in here."
						},
						{
							static: true,
							name: "Online-Selbstbedienungsfunktionen der Studentenkanzlei",
							url: "https://qissos.verwaltung.uni-muenchen.de/qisserversos/rds?state=user&amp;type=1&amp;category=auth.login&amp;startpage=portal.vm",
							shortName: "OSS",
							description: ""
						},
					]
				}
			},
			container: 'workspace-app'
		});
	})
</script>
<!--
<div class="c-toolbox-workspace--default"
     data-css="c-toolbox-workspace"
     data-js-module="toolbox-workspace"
     data-js-options='{}'>
	<div class="grid__container" data-css="c-toolbox-button" data-js-module="toolbox-modal">
		<div class="grid__row">
			<h2 class="toolbox-workspace__headline">Deine Toolbox</h2>
			<p class="toolbox-workspace__text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu dui, porttitor eu eros eu, accumsan faucibus diam. Aliquam feugiat nulla ac suscipit rhoncus. Etiam vitae massa eros. Sed tempor ligula ac felis interdum, id ullamcorper est tempor. Etiam vehicula, erat ut posuere vehicula, libero erat volutpat elit, at lobortis lectus nibh at libero. Nunc luctus nunc ac sapien venenatis malesuada. Proin vel sapien enim. Morbi ullamcorper hendrerit ultricies.
			</p>
		</div>
		<div class="grid__row">
			<div class="grid__col is-col-tablet-p-6 m-t-s">
				<div class="toolbox-button__wrapper">
					<div class="toolbox-button__left-wrapper">
						<div class="toolbar-button--title">
							<span>DKP</span>
						</div>
						<div class="toolbar-button__arrow-icon"></div>
						<span class="toolbar-button__arrow-text">LMU Raumfinder</span>
					</div>
					<div class="toolbox-button__info-wrapper" data-css="c-popover" data-js-module="popover">
						<div data-js-item="toggle-popover" class="toolbox-button__icon-info">i</div>
						<div class="popover">
							<div class="popover__wrapper">
								<button data-js-item="toggle-popover" class="popover__close">Schließen</button>
								<div class="popover__content">
									<h1>Deine Mailbox</h1>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Id pariatur voluptatibus reiciendis commodi, labore officiis eveniet totam sequi minus illum. Odit nulla nihil mollitia, veritatis et voluptatibus ducimus iure cupiditate.
									</p>
								</div>
								<div class="popover__footer">
									<div class="popover__footer-link-container">
										<a href="#" class="popover__footer-link is-more">mehr erfahren</a>
									</div>
									<div class="popover__footer-link-container">
										<a href="javascript:void(0)" data-js-item="delete-item" class="popover__footer-link is-delete">Tool löschen</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="grid__col is-col-tablet-p-6 m-t-s">
				<div class="toolbox-button__wrapper">
					<div class="toolbox-button__left-wrapper">
						<div class="toolbar-button--title">
							<span>DKP</span>
						</div>
						<div class="toolbar-button__arrow-icon"></div>
						<div class="toolbar-button__arrow-text">Dein Virtueller Projecktraum</div>
					</div>
					<div class="toolbox-button__info-wrapper">
						<div class="toolbox-button__icon-info">i</div>
					</div>
				</div>
			</div>
		</div>
		<div class="grid__row">
			<div class="grid__col is-col-tablet-p-6 m-t-s">
				<div class="toolbox-button__wrapper">
					<div class="toolbox-button__left-wrapper">
						<div class="toolbar-button--title">
							<span>DKP</span>
						</div>
						<div class="toolbar-button__arrow-icon"></div>
						<span class="toolbar-button__arrow-text">LSF: Deine Forshung</span>
					</div>
					<div class="toolbox-button__info-wrapper">
						<div class="toolbox-button__icon-info">i</div>
					</div>
				</div>
			</div>
			<div class="grid__col is-col-tablet-p-6 m-t-s" data-css="c-add-button">
				<a href="javascript:void(0)" data-js-item="open-modal">
					<div class="add-button__wrapper">
						<div class="add-button__content-wrapper">
							<div class="add-button--title">
								<span>+</span>
							</div>
							<div class="add-button--content">
								<div class="add-button__content-link">Tool hinzufügen</div>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div data-css="c-toolbox-modal">
			<div class="modal">
				<div class="add-toolbox--modal">
					<div class="grid__container">
						<div class="grid__row">
							<div class="add-toolbox__content">
								<div class="add-toolbox__header">
									<h2 class="add-toolbox__headline">Tool hinzufugen</h2>
									<span data-js-item="close-modal" class="close">&times;</span>
								</div>
								<form class="c-form--default is-form is-error" method="POST"
									  data-css="c-form" data-js-module="form-ajax">
									<div class="form__row">
										<div class="form__col is-grid-col is-col-tablet-p-12">
											<div class="form__radio">
												<div class="form__radio-wrapper">
													<ul class="form__radio-list">
														<li class="form__radio-item">
															<input id="radio-01" name="radio" type="radio" value="radio-01" checked="checked" class="form__radio-input">
															<label role="button" for="radio-01" class="form__radio-label">
																Radiobutton aktiv
															</label>
														</li>
														<li class="form__radio-item">
															<input id="radio-02" name="radio" type="radio" value="radio-02" class="form__radio-input">
															<label role="button" for="radio-02" class="form__radio-label">
																Radiobutton passiv
															</label>
														</li>
														<li class="form__radio-item">
															<input id="radio-03" name="radio" type="radio" value="radio-03" class="form__radio-input">
															<label role="button" for="radio-03" class="form__radio-label">
																Radiobutton passiv
															</label>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="form__row">
										<div class="form__col is-col-tablet-p-12">
											<p class="add-toolbox-info__text">
												Die mit <span>*</span> gekennzeichneten Felder sind Pflichtfelder
											</p>
										</div>
									</div>
									<div class="form__row">
										<div class="form__col is-grid-col is-col-tablet-p-4">
											<div class="form__input">
												<div class="form__label-wrapper">
													<label for="url" class="form__input-label">
														URL  <abbr title="Required">*</abbr>
													</label>
												</div>
												<div class="form__input-wrapper">
													<input id="url" name="url" type="url" placeholder="http://www.lmu.de/" required="required" class="form__input-text">
												</div>
											</div>
										</div>
										<div class="form__col is-grid-col is-col-tablet-p-4">
											<div class="form__input">
												<div class="form__label-wrapper">
													<label for="text1" class="form__input-label">
														Name  <abbr title="Required">*</abbr>
													</label>
												</div>
												<div class="form__input-wrapper">
													<input id="text1" name="name" type="text" required="required" class="form__input-text">
												</div>
											</div>
										</div>
										<div class="form__col is-grid-col is-col-tablet-p-4">
											<div class="form__input">
												<div class="form__label-wrapper">
													<label for="shorname" class="form__input-label">
														Namenskürzel
													</label>
												</div>
												<div class="form__input-wrapper">
													<input id="shorname" name="shortname" type="text"  class="form__input-text">
												</div>
											</div>
										</div>
									</div>
									<div class="form__row ">
										<div class="form__col is-grid-col is-col-tablet-p-12">
											<button type="submit" class="form__submit">
												<span class="from_submit-arrow"></span>
												<span class="form__submit-text">Speichern</span>
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<br>
	<br>
</div>
-->

TOOLBOX-WORKSPACE (LMU Workspace Module )

src/app/shared/components/toolbox-workspace/templates

Demo Section

Default

Readme

toolboxWorkspace (`component`)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

`toolbox-workspace.hbs`

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

toolbox-workspace.hbs

Data File

toolbox-workspace.hjson

Styles

toolbox-workspace.scss

Scripts

toolbox-workspace.js

HTML Output

Default

Wonach suchst du?

TOOLBOX-WORKSPACE (LMU Workspace Module )

src/app/shared/components/toolbox-workspace/templates

Demo Section

Default

Readme

toolboxWorkspace (component)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

toolbox-workspace.hbs

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

toolbox-workspace.hbs

Data File

toolbox-workspace.hjson

Styles

toolbox-workspace.scss

Scripts

toolbox-workspace.js

HTML Output

Default

Wonach suchst du?

toolboxWorkspace (`component`)

`toolbox-workspace.hbs`