Commit f04805df authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add compact mode for neos-input

This allow to use neos-input inside a dropdown
parent a400b3ac
Pipeline #2480 passed with stage
in 3 minutes and 46 seconds
......@@ -19,4 +19,6 @@ and run:
```bash
npm install
npm start
```
\ No newline at end of file
```
Check the live version [here](https://neos.go.ttree.space/neos-ui-kit/)
\ No newline at end of file
......@@ -79,9 +79,17 @@ export namespace Components {
}
interface NeosFormInputWrapper {
/**
* Hide label and remove margin around the input
*/
'compact': boolean;
'label': string;
}
interface NeosFormInputWrapperAttributes extends StencilHTMLAttributes {
/**
* Hide label and remove margin around the input
*/
'compact'?: boolean;
'label'?: string;
}
......@@ -107,6 +115,10 @@ export namespace Components {
*/
'clearOnEdit': boolean;
/**
* Hide label and remove margin around the input
*/
'compact': boolean;
/**
* If true, the user cannot interact with the input. Defaults to `false`.
*/
'disabled': boolean;
......@@ -202,6 +214,10 @@ export namespace Components {
*/
'clearOnEdit': boolean;
/**
* Hide label and remove margin around the input
*/
'compact'?: boolean;
/**
* If true, the user cannot interact with the input. Defaults to `false`.
*/
'disabled'?: boolean;
......
......@@ -21,7 +21,8 @@ export class Button {
render() {
return (<button class={this.className()} disabled={this.disabled} type={this.type}>
<slot name="icon" /> <slot/>
<slot name="icon" />
<slot/>
</button>);
}
}
......@@ -13,7 +13,7 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
background-color: neos-color($colors-dark, 'neutral');
border: 0;
color: neos-color($colors-dark, 'neutral', 'contrast');
......@@ -71,6 +71,15 @@
}
}
&.t-danger {
background-color: neos-color($colors-dark, 'danger');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'danger', 'shade');
}
}
&.l-squared {
display: flex;
align-items: center;
......
......@@ -9,15 +9,32 @@ export class FormInputWrapper {
@Prop() label: string;
render() {
/**
* Hide label and remove margin around the input
*/
@Prop() compact = false;
renderHeader() {
return (
<div class="label-wrapper">
<div class="header">
<div class="label">
<neos-label label={this.label}></neos-label>
</div>
<div class="metadata">
<slot name="metadata"/>
</div>
</div>
);
}
wrapperClassName() {
return this.compact === false ? 'label-wrapper' : 'label-wrapper label-wrapper--compact'
}
render() {
return (
<div class={this.wrapperClassName()}>
{this.compact === false ? this.renderHeader() : null}
<div class="content">
<slot name="before"/>
<slot/>
......
......@@ -8,11 +8,20 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
margin-bottom: $content-dark-margin;
.header {
font-size: $font-size-dark-base;
}
.label-wrapper {
flex: 1;
flex-wrap: wrap;
margin-bottom: $content-dark-margin;
&--compact {
margin-top: -8px;
margin-bottom: 2px;
}
}
.metadata {
......
......@@ -8,4 +8,14 @@
align-items: flex-end;
}
.header {
display: flex;
align-items: flex-end;
width: 100%;
}
.metadata {
margin-left: auto;
}
}
......@@ -159,6 +159,11 @@ export class FormInput {
*/
@Prop() type = 'text';
/**
* Hide label and remove margin around the input
*/
@Prop() compact = false;
@Prop({mutable: true}) value = '';
......@@ -249,7 +254,7 @@ export class FormInput {
render() {
return (
<label>
<neos-form-input-wrapper label={this.label}>
<neos-form-input-wrapper label={this.label} compact={this.compact}>
<slot name="metadata" slot="metadata"/>
<slot name="before" slot="before"/>
<input
......
......@@ -17,6 +17,10 @@
transition: all ease-in 180ms;
}
label {
margin: 0;
}
.input {
display: flex;
align-items: center;
......
......@@ -4,13 +4,13 @@
:host {
color: $text-dark-color-value;
font-family: $font-family-dark-base;
font-weight: 400;
font-weight: 600;
font-size: $font-size-dark-base;
margin-right: $content-margin-medium;
.t-bold {
font-size: $font-size-dark-large;
font-weight: 600;
font-weight: 700;
}
}
......@@ -6,7 +6,8 @@
<title>Stencil Component Starter</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="build/neos.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="build/neos.js"></script>
<style>
h1, h2 {
......@@ -16,15 +17,18 @@
font-size: 24px;
text-transform: uppercase;
}
h2 {
font-size: 18px;
text-transform: lowercase;
opacity: .6;
}
section[role=presentation] {
border-top: 4px solid white;
margin-bottom: 40px;
}
section[role=presentation] section[role=presentation] {
border-top: 0;
margin-bottom: 20px;
......@@ -38,18 +42,24 @@
color: black;
text-align: center;
}
.block {
margin-bottom: 8px;
}
</style>
</head>
<body style="background-color: #222222; padding: 2rem;">
<p class="disclaimer"><a href="https://gitlab.ttree.ch/neos/neos-ui-kit/">This project</a> is experimental and not an official Neos CMS project</p>
<p class="disclaimer"><a href="https://gitlab.ttree.ch/neos/neos-ui-kit/">This project</a> is experimental and not an
official Neos CMS project</p>
<section role="presentation">
<header>
<h1>neos-form-input</h1>
</header>
<neos-form-input label="Title" value="Nice title to master your SEO Skill"></neos-form-input>
<neos-form-input label="Canonical title" placeholder="Help editor to fill me..."></neos-form-input>
<neos-form-input label="URI Path Segment" value="nice-title-to-master-your-seo-skills" placeholder="Help editor to fill me..."></neos-form-input>
<neos-form-input label="URI Path Segment" value="nice-title-to-master-your-seo-skills"
placeholder="Help editor to fill me..."></neos-form-input>
</section>
<section role="presentation">
<header>
......@@ -59,14 +69,29 @@
<header>
<h2>default</h2>
</header>
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
<div class="block">
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
</div>
<div class="block">
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-form-input label="URI Path Segement" compact value="Page">
<neos-icon squared theme="neutral" name="filter" type="solid" slot="before"></neos-icon>
</neos-form-input>
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
</div>
</section>
</section>
......@@ -82,14 +107,41 @@
<neos-badge>France</neos-badge>
<neos-badge>Germany</neos-badge>
</section>
<section>
<header>
<h2>with icons</h2>
</header>
<neos-badge><neos-icon name="frown"></neos-icon> Switzerland</neos-badge>
<neos-badge><neos-icon name="frown"></neos-icon> France</neos-badge>
<neos-badge><neos-icon name="frown"></neos-icon> Germany</neos-badge>
<div class="block">
<neos-badge>
<neos-icon name="frown"></neos-icon>
Switzerland
</neos-badge>
<neos-badge>
<neos-icon name="frown"></neos-icon>
France
</neos-badge>
<neos-badge>
<neos-icon name="frown"></neos-icon>
Germany
</neos-badge>
</div>
<div class="block">
<neos-badge>
Switzerland
<neos-icon name="frown"></neos-icon>
</neos-badge>
<neos-badge>
France
<neos-icon name="frown"></neos-icon>
</neos-badge>
<neos-badge>
Germany
<neos-icon name="frown"></neos-icon>
</neos-badge>
</div>
</section>
</section>
</section>
<section role="presentation">
<header>
......@@ -109,26 +161,28 @@
<header>
<h2>with icon</h2>
</header>
<neos-button>
<neos-icon name="folder" slot="icon"></neos-icon>
Confirm
</neos-button>
<neos-button theme="clean">
<neos-icon name="check-circle" slot="icon"></neos-icon>
Publish
</neos-button>
<neos-button theme="brand">
<neos-icon name="heart" slot="icon"></neos-icon>
Did you love Neos?
</neos-button>
<neos-button theme="warn">
<neos-icon name="folder" slot="icon"></neos-icon>
Delete
</neos-button>
<neos-button theme="warn" disabled>
<neos-icon name="frown" slot="icon"></neos-icon>
Delete
</neos-button>
<div class="block">
<neos-button>
<neos-icon name="folder" slot="icon"></neos-icon>
Confirm
</neos-button>
<neos-button theme="clean">
<neos-icon name="check-circle" slot="icon"></neos-icon>
Publish
</neos-button>
<neos-button theme="brand">
<neos-icon name="heart" slot="icon"></neos-icon>
Did you love Neos?
</neos-button>
<neos-button theme="warn">
<neos-icon name="folder" slot="icon"></neos-icon>
Delete
</neos-button>
<neos-button theme="warn" disabled>
<neos-icon name="frown" slot="icon"></neos-icon>
Delete
</neos-button>
</div>
</section>
<section role="presentation">
<header>
......@@ -274,7 +328,8 @@
</neos-dropdown>
</neos-inspector-group>
<neos-inspector-group icon="cogs" label="SEO">
<neos-form-input label="Descritption" placeholder="A short and meanigful description of the document"></neos-form-input>
<neos-form-input label="Descritption"
placeholder="A short and meanigful description of the document"></neos-form-input>
<neos-form-input label="Keywords"></neos-form-input>
<neos-form-input label="Email" value="hello@neos.io">
<neos-icon squared name="at" type="solid" theme="neutral" slot="before"></neos-icon>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment