Merge branch 'master' into timeline-webworkers

dev-app/app.html

@@ -24,7 +24,7 @@
  state="${link.isActive ? 'active' : ''}"
  >
  </c-nav-horizontal-item>
- <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.6"></c-nav-horizontal-item>
+ <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.7"></c-nav-horizontal-item>
  </c-nav-horizontal>
  </l-box>
  </l-sidebar>

dev-app/routes/components/timeline/demo/index.ts

@@ -40,6 +40,7 @@ export class TimelineExample {
  },
  {
  accentColor: '#38A56C',
+ active: true,
  duration: 6500,
  icons: ['slicer', 'rules'],
  start: moment(this.today).add(11, 'hours').add(15, 'minutes').toISOString(),

dev-app/routes/components/timeline/properties/index.ts

@@ -157,71 +157,77 @@ export class TimelineProperties {
  ];
 
  public timelineEntriesRows = [
- {
+  {
  description: 'Color of the borders and icons in the entry.',
  key: 'accentColor',
+ type: 'CSS color',
  value: '#8E5DB2',
- type: 'CSS color'
+ },
+ {
+ description: 'Set if the entry is active.',
+ key: 'active',
+ type: 'boolean',
+ value: 'true',
  },
  {
  description: 'Alternate text value to show in place of time when displaying entry (optional).',
  key: 'altTime',
+ type: 'string',
  value: 'Started at 12:05AM.',
- type: 'string'
  },
  {
  description: 'Background color of the time entry (optional).',
  key: 'background',
+ type: 'CSS color',
  value: 'blue',
- type: 'CSS color'
  },
  {
  description: 'Font color of the time entry (optional).',
  key: 'color',
+ type: 'CSS color',
  value: 'white',
- type: 'CSS color'
  },
  {
  description: 'Duration of entry in seconds.',
  key: 'duration',
+ type: 'number',
  value: 1320,
- type: 'number'
  },
  {
  description: 'Array of icon names. Up to two are displayed (optional).',
  key: 'icons',
+ type: 'string[]',
  value: "['time', 'rules']",
- type: 'string[]'
  },
  {
  description: 'The size of the entry on day views (optional).',
  key: 'sizeDay',
+ type: 'string',
  value: 'expandable | small',
- type: 'string'
  },
  {
  description: 'The size of the entry on week views (optional).',
  key: 'sizeWeek',
+ type: 'string',
  value: 'expandable | small',
- type: 'string'
  },
  {
  description: 'The start of the entry in ISOString format.',
  key: 'start',
+ type: 'ISOString',
  value: 'moment().toISOString()',
- type: 'ISOString'
  },
  {
  description: 'The end of the entry in ISOString format (optional).',
  key: 'end',
+ type: 'ISOString',
  value: 'moment().toISOString()',
- type: 'ISOString'
  },
  {
  description: 'Title of the time entry',
  key: 'title',
+ type: 'string',
  value: 'A title',
- type: 'string'
  },
  ];
 }

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@bindable-ui/bindable",
  "description": "An Aurelia component library",
- "version": "1.0.6",
+ "version": "1.0.7",
  "repository": {
  "type": "git",
  "url": "https://github.com/bindable-ui/bindable"

src/components/timeline/c-time-entry/c-time-entry.css

@@ -10,6 +10,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 /**
  * ENTRY
  * CLICKABLE
+ * ACTIVE
  * CONTAINER
  * - Info
  * - Icons
@@ -77,6 +78,25 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 
 
 
+/*------------------------------------*\
+ !ACTIVE
+\*------------------------------------*/
+
+.active:before{
+ opacity: 1;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ content: '';
+ background: var(--time-entry-accent-color);
+ filter: brightness(45%);
+ transition: opacity var(--trans_main);
+}
+
+
+
+
+
 /*------------------------------------*\
  !CONTAINER
 \*------------------------------------*/

src/components/timeline/c-time-entry/c-time-entry.html

@@ -11,6 +11,7 @@
  ${styles.entry}
  ${styles.clickable}
  ${popoverOpen ? 'popover-open' : ''}
+ ${item.active ? styles.active : ''}
  ${item.sizeDay === 'small' ? styles.smallDay : ''}
  ${item.sizeDay === 'expandable' ? styles.expandableDay : ''}
  ${item.sizeDay === 'expandable' ? 'expandable-day' : ''}

src/components/timeline/c-timeline/c-timeline-interfaces.ts

@@ -9,6 +9,8 @@ export interface ITimelineActions {
 }
 
 export interface ITimeEntryBasic {
+ accentColor?: string;
+ active?: boolean;
  altTime?: string;
  background?: string;
  color?: string;