TOOLBOX-BUTTON (LMU Workspace Module )
src/app/shared/components/toolbox-button/templates
Demo Section
Each variation will be presented in the following section.
Readme
toolboxButton (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-button
Fields
toolbox-button.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.toolboxButtonClasses | String | '' |
Modifier classes for component |
| settings.toolboxButtonContextClass | String | 'default' |
Context class of component |
| settings.toolboxButtonJsOptions | Object | null |
JavaScript options object which gets stringified |
Content
| Parameter | Type | Description |
|---|---|---|
| content.toolboxButtonField | 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-button-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-toolbox-button:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
toolbox-button.hbs
<div class="c-toolbox-button{{#if settings.toolboxButtonContextClass}}--{{settings.toolboxButtonContextClass}}{{else}}--default{{/if}}{{#if settings.toolboxButtonClasses}} {{settings.toolboxButtonClasses}}{{/if}}"
data-css="c-toolbox-button"
data-js-module="toolbox-button"{{#if settings.toolboxButtonJsOptions}}
data-js-options='{{stringify settings.toolboxButtonJsOptions}}'{{/if}}>
<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 Raumfinder Raumfinder</span>
</div>
<div class="toolbox-button__info-wrapper">
<div class="toolbox-button__icon-info">i</div>
</div>
</div>
</div>
Data File
toolbox-button.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"toolboxButtonContextClass": "default",
"toolboxButtonClasses": "",
"toolboxButtonJsOptions": {}
},
"content": {}
}
}
}
Styles
toolbox-button.scss
/* ===================================================
component: toolbox-button
=================================================== */
/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
$toolbox-button-mobile-w: 100%;
$toolbox-button-mobile-h: 54px;
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-toolbox-button"] {
button {
border: 0;
background: transparent;
cursor: pointer;
}
button:focus {
outline: 0;
}
.toolbox-button__wrapper {
background: #F5F5F5;
width: $toolbox-button-mobile-w;
height: $toolbox-button-mobile-h;
color: #F5F5F5;
display: flex;
justify-content: space-between;
.toolbox-button__left-wrapper {
display: flex;
justify-content: start;
.toolbar-button--title {
background: #232323;
width: 54px;
height: 54px;
color: $color-white;
text-align: center;
padding-top: 17px;
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;
}
.toolbar-button__arrow-icon {
@include sprites-icon-arrow-green100();
transition: transform $animation-duration-std $animation-easing-std;
margin-left: 5px;
padding: 1rem;
margin-top: 2rem;
}
.toolbar-button__arrow-text {
text-decoration: none;
font-size: 15px;
color: $color-green;
letter-spacing: 0.28px;
line-height: 22px;
font-family: $font-bold;
margin-top: 1.7rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 16rem;
@include bp($bp-tablet-l) {
width: 26rem;
}
@include bp($bp-desktop-m) {
width: 36rem;
}
@include bp($bp-desktop-l) {
width: 41rem;
}
}
}
.toolbox-button__info-wrapper {
background: $color-green;
width: 25px;
height: 25px;
text-align: center;
margin-top: 15px;
margin-right: 12px;
cursor: pointer;
}
.toolbox-button__icon-info {
color: $color-white;
font-weight: bold;
padding-top: 2px;
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-toolbox-button--default {
}
Scripts
toolbox-button.js
/**
* Description of ToolboxButton.
* Class properties and decorators are supported.
*
* @module ToolboxButton
* @version v1.0.0
*
* @author Serkan Ertan
*/
// Imports
import $ from 'jquery';
import Component from '@veams/component';
class ToolboxButton 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 ToolboxButton!`);
};
/**
* 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 ToolboxButton will mount!');
}
didMount() {
console.log('Component ToolboxButton mounted!');
}
/**
* Render class
*/
render() {
return this;
}
}
export default ToolboxButton;
HTML Output
Default
<div class="c-toolbox-button--default" data-css="c-toolbox-button" data-js-module="toolbox-button" data-js-options='{}'>
<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 Raumfinder Raumfinder</span>
</div>
<div class="toolbox-button__info-wrapper">
<div class="toolbox-button__icon-info">i</div>
</div>
</div>
</div>