todolist component

src/app/pages/dashboard/dashboard.component.ts

@@ -6,12 +6,13 @@ import {TrafficChart} from './trafficChart';
 import {UsersMap} from './usersMap';
 import {LineChart} from './lineChart';
 import {Feed} from './feed';
+import {Todo} from './todo';
 import {BaCard} from '../../theme/components';
 
 @Component({
   selector: 'dashboard',
   pipes: [],
-  directives: [PopularApp, PieChart, TrafficChart, UsersMap, LineChart, Feed, BaCard],
+  directives: [PopularApp, PieChart, TrafficChart, UsersMap, LineChart, Feed, Todo, BaCard],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./dashboard.scss')],
   template: require('./dashboard.html')

src/app/pages/dashboard/dashboard.html

@@ -38,3 +38,11 @@
   </div>
 
 </div>
+
+<div class="row shift-up">
+  <ba-card class="col-xlg-3 col-lg-6 col-md-6 col-xs-12" title="To Do List"
+           baCardClass="xmedium-panel feed-comply-panel with-scroll todo-panel">
+    <todo></todo>
+  </ba-card>
+</div>
+

src/app/pages/dashboard/todo/index.ts

@@ -0,0 +1 @@
+export * from './todo.component';

src/app/pages/dashboard/todo/todo.component.ts

@@ -0,0 +1,63 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+import {TodoService} from './todo.service';
+
+@Component({
+  selector: 'todo',
+  encapsulation: ViewEncapsulation.None,
+  providers: [TodoService],
+  styles: [require('./todo.scss')],
+  template: require('./todo.html')
+})
+export class Todo {
+
+  public marks:Array<any>;
+  public todoList:Array<any>;
+  public newTodoText:string = '';
+
+  constructor(private _todoService:TodoService) {
+    this.marks = this._todoService.getMarks();
+    this.todoList = this._todoService.getTodoList();
+  }
+
+  ngOnInit() {
+
+  }
+
+  getNotDeleted() {
+    return this.todoList.filter((item:any) => {return !item.deleted})
+  }
+
+  getMarkColor(id) {
+    return this.marks.filter((item) => { return item.id === id;} )[0].color || '';
+  }
+
+  changeColor(todo) {
+    for (var i = 0; i < this.marks.length; ++i) {
+      if (this.marks[i].id === todo.markId) {
+        var next = (i + 1 !== this.marks.length) ? i + 1 : 0;
+        todo.markId = this.marks[next].id;
+        return false;
+      }
+    }
+  }
+
+  blurOnEnter(event, item) {
+    if (event.which === 13) {
+      item.edit = false;
+    }
+  }
+
+  addToDoItem($event, clickPlus) {
+
+    if ($event.which === 1 || $event.which === 13) {
+
+      this.todoList.unshift({
+        text: this.newTodoText,
+        edit: false,
+        markId: 0
+      });
+      this.newTodoText = '';
+    }
+  }
+}

src/app/pages/dashboard/todo/todo.html

@@ -0,0 +1,17 @@
+<input type="text" value="" class="form-control task-todo" placeholder="Task to do.." (keyup)="addToDoItem($event)" [(ngModel)]="newTodoText"/>
+<i (click)="addToDoItem($event)" class="add-item-icon ion-plus-round"></i>
+<div class="box-shadow-border"></div>
+
+<ul class="todo-list">
+  <li *ngFor="#item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}" class="{{ getMarkColor(item.markId) }}"
+      (mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
+
+    <div class="blur-container"><div class="blur-box"></div></div>
+    <i class="mark"></i>
+    <label class="todo-checkbox custom-checkbox custom-input-success">
+      <input type="checkbox" [(ngModel)]="item.isChecked">
+      <span class="cut-with-dots">{{ item.text }}</span>
+    </label>
+    <i class="remove-todo ion-ios-close-empty" (click)="item.deleted = true"></i>
+  </li>
+</ul>

src/app/pages/dashboard/todo/todo.scss

@@ -0,0 +1,226 @@
+@import '../../../theme/sass/conf/conf';
+
+
+input.task-todo {
+  margin-bottom: 8px;
+}
+
+ul.todo-list {
+  margin: 0;
+  padding: 0;
+  .placeholder, .ui-sortable-placeholder {
+  }
+  li {
+    margin: 0 0 -1px 0;
+    padding: 12px;
+    list-style: none;
+    position: relative;
+    border: 1px solid $input-border;
+    cursor: grab;
+    height: 42px;
+    i.remove-todo {
+      position: absolute;
+      cursor: pointer;
+      top: 0px;
+      right: 12px;
+      font-size: 32px;
+      transition: color 0.2s;
+      color: $input-border;
+      visibility: hidden;
+      line-height: 42px;
+      &:hover {
+        color: $danger-dark;
+      }
+    }
+    &:hover {
+      i.remove-todo {
+        visibility: visible;
+      }
+    }
+
+    &.checked {
+      .todo-text {
+        color: #BFBFBF;
+      }
+      &:before {
+        background: $input-border !important;
+      }
+    }
+
+    @mixin mark($color) {
+      i.mark {
+        background: $color;
+      }
+    }
+    &.primary {
+      @include mark($primary);
+    }
+    &.danger {
+      @include mark($danger);
+    }
+    &.success {
+      @include mark($success);
+    }
+    &.info {
+      @include mark($info);
+    }
+    &.warning {
+      @include mark($warning);
+    }
+
+    i.mark {
+      display: block;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      height: 42px;
+      min-width: 4px;
+      background: $input-border;
+      cursor: pointer;
+      transition: min-width 0.3s ease-out;
+    }
+
+    &.active {
+      i.mark {
+        min-width: 40px;
+      }
+      label.todo-checkbox > span {
+        &:before {
+          color: white;
+          content: '\f10c';
+          margin-right: 20px;
+          transition: margin-right 0.1s ease-out;
+          transition-delay: 0.2s;
+          float: none;
+        }
+      }
+      label.todo-checkbox > input:checked + span:before {
+        content: '\f00c';
+      }
+    }
+  }
+}
+
+label.todo-checkbox {
+  padding-left: 0;
+  margin-bottom: 0;
+
+  width: 100%;
+  padding-right: 25px;
+  min-height: 16px;
+  cursor: pointer;
+  > span {
+    white-space: nowrap;
+    height: 16px;
+    &:before {
+      border: none;
+      color: $help-text;
+      transition: all 0.15s ease-out;
+    }
+  }
+}
+
+.add-item-icon {
+  display: none;
+}
+
+body.badmin-transparent {
+  .todo-panel.panel {
+    color: white;
+    opacity: 0.9;
+  }
+  input.task-todo {
+    color: white;
+    width: calc(100% - 25px);
+    border-radius: 0;
+    border: none;
+    background: transparent;
+    &:focus {
+      outline: none;
+      background-color: transparent;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+    }
+  }
+  .add-item-icon {
+    display: block;
+    float: right;
+    margin-top: -45px;
+    margin-right: 5px;
+    font-size: 25px;
+    cursor: pointer;
+  }
+
+  ul.todo-list {
+    li {
+      margin: 0;
+      border: none;
+      font-weight: $font-light;
+
+      .blur-container{
+        height: 40px;
+        position: absolute;
+        width: calc(100% + 40px);;
+        top: 0;
+        left: -25px;
+        overflow-y: hidden;
+      }
+      &:hover{
+        .blur-container{
+          box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+        }
+        .blur-box {
+          height: 100%;
+          background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
+          -webkit-filter: blur(3px);
+        }
+      }
+      &.primary, &.danger,&.success, &.info, &.warning {
+        i.mark {
+          background-color: transparent;
+        }
+      }
+      i.remove-todo {
+        color: white;
+        opacity: 0.4;
+        &:hover {
+          color: white;
+          opacity: 0.95;
+        }
+      }
+      i.mark {
+        min-width: 40px;
+        background-color: transparent;
+      }
+      label.todo-checkbox > span {
+        &:before {
+          position: absolute;
+          color: white;
+          content: '\f10c';
+          float: none;
+          margin-right: 6px;
+          transition: none;
+        }
+      }
+      &.checked {
+        label.todo-checkbox > span {
+          &:before {
+            margin-right: 0;
+            position: absolute;
+            content: '';
+            background-size: contain;
+            background: url($images-root + "app/todo/check-icon.png") no-repeat;
+          }
+        }
+      }
+    }
+  }
+
+  .box-shadow-border{
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+    width: calc(100% + 44px);
+    margin-left: -22px;
+  }
+
+}

src/app/pages/dashboard/todo/todo.service.ts

@@ -0,0 +1,84 @@
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class TodoService {
+
+  private _marks = [
+    {
+      id: 0,
+      color: 'default'
+    },
+    {
+      id: 1,
+      color: 'primary'
+    },
+    {
+      id: 2,
+      color: 'success'
+    },
+    {
+      id: 3,
+      color: 'warning'
+    },
+    {
+      id: 4,
+      color: 'danger'
+    }
+  ];
+
+  private _todoList = [
+    {
+      text: 'Check me out',
+      edit: false,
+      markId: 4
+    },
+    {
+      text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro',
+      edit: false,
+      markId: 3
+    },
+    {
+      text: 'Ex has semper alterum, expetenda dignissim',
+      edit: false,
+      markId: 2
+    },
+    {
+      text: 'Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.',
+      edit: false,
+      markId: 1
+    },
+    {
+      text: 'Simul erroribus ad usu',
+      edit: false,
+      markId: 0
+    },
+    {
+      text: 'Ei cum solet appareat, ex est graeci mediocritatem',
+      edit: false,
+      markId: 4
+    },
+    {
+      text: 'Get in touch with akveo team',
+      edit: false,
+      markId: 1
+    },
+    {
+      text: 'Write email to business cat',
+      edit: false,
+      markId: 3
+    },
+    {
+      text: 'Have fun with blur admin',
+      edit: false,
+      markId: 2
+    },
+  ];
+
+  getMarks() {
+    return this._marks;
+  }
+
+  getTodoList() {
+    return this._todoList;
+  }
+}

src/app/theme/sass/_form.scss

@@ -0,0 +1,563 @@
+.label {
+  border-radius: 0;
+}
+
+.label-primary {
+  background: $primary;
+}
+
+.label-info {
+  background: $primary-light;
+}
+
+.label-success {
+  background: $success;
+}
+
+.label-warning {
+  background: $warning;
+}
+
+.label-danger {
+  background: $danger;
+}
+
+.form-horizontal {
+  label {
+    line-height: 34px;
+    margin-bottom: 0;
+    padding-top: 0 !important;
+  }
+}
+
+.form-group {
+  label {
+    margin-bottom: 5px;
+    color: $default-text;
+    font-weight: $font-normal;
+    font-size: 13px;
+  }
+}
+
+.form-control {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  &:focus {
+    box-shadow: none;
+    border-color: $primary-bg;
+    background: #ffffff;
+  }
+}
+
+select.form-control {
+  padding-left: 8px;
+}
+
+textarea.form-control {
+  height: 96px;
+}
+
+.modal-form-btn {
+  text-align: center;
+}
+
+.form-inline {
+  .form-group {
+    input {
+      width: 100%;
+    }
+    label {
+      margin-right: 12px;
+    }
+  }
+
+  button[type="submit"] {
+    margin-left: 12px;
+  }
+
+  label.custom-checkbox > span {
+    display: block;
+    margin-top: -13px;
+    margin-right: 10px;
+  }
+}
+
+.modal-content {
+  border-radius: 5px;
+  border: none;
+  color: $default-text;
+  .modal-header {
+    color: $default;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+}
+
+@mixin setSwitchBorder($color) {
+  .bootstrap-switch.bootstrap-switch-on {
+    border-color: $color;
+  }
+}
+
+.switch-container {
+  display: inline-block;
+  & {
+    @include setSwitchBorder($default);
+  }
+  &.primary {
+    @include setSwitchBorder($primary);
+  }
+  &.success {
+    @include setSwitchBorder($success);
+  }
+  &.warning {
+    @include setSwitchBorder($warning);
+  }
+  &.danger {
+    @include setSwitchBorder($danger);
+  }
+  &.info {
+    @include setSwitchBorder($primary-light);
+  }
+}
+
+.bootstrap-switch {
+  border-radius: 5px;
+  border: 1px solid $default;
+  transition: border-color ease-in-out .7s, box-shadow ease-in-out .7s;
+  &:focus {
+    outline: none;
+  }
+  &.bootstrap-switch-off {
+    border-color: $input-border;
+  }
+  &.bootstrap-switch-focused {
+    box-shadow: none;
+    &.bootstrap-switch-off {
+      border-color: $input-border;
+    }
+  }
+  .bootstrap-switch-container {
+    border-radius: 0;
+    &:focus {
+      outline: none;
+    }
+  }
+  .bootstrap-switch-handle-on {
+    border-radius: 0;
+    &.bootstrap-switch-default {
+      background: $default;
+    }
+    &.bootstrap-switch-success {
+      background: $success;
+    }
+    &.bootstrap-switch-primary {
+      background: $primary;
+    }
+    &.bootstrap-switch-warning {
+      background: $warning;
+    }
+    &.bootstrap-switch-danger {
+      background: $danger;
+    }
+    &.bootstrap-switch-info {
+      background: $primary-light;
+    }
+  }
+  .bootstrap-switch-handle-off {
+    border-radius: 0;
+  }
+
+  .bootstrap-switch-label {
+    background: transparent;
+  }
+
+  &.bootstrap-switch-animate .bootstrap-switch-container {
+    transition: margin-left .2s;
+  }
+}
+
+.switches {
+  margin-left: -12px;
+  margin-bottom: -12px;
+  .switch-container {
+    float: left;
+    margin-left: 12px;
+    margin-bottom: 12px;
+  }
+}
+
+.input-group {
+  width: 100%;
+  margin-bottom: 15px;
+  & > span {
+    border-radius: 0;
+  }
+}
+
+label.custom-checkbox {
+  padding-right: 0;
+  padding-left: 0;
+  margin-bottom: 0;
+  & > input {
+    height: 0;
+    z-index: -100 !important;
+    opacity: 0;
+    position: absolute;
+    &:checked {
+      & + span {
+        &:before {
+          content: "\f00c";
+          font-weight: $font-light;
+        }
+      }
+    }
+    &:disabled {
+      & + span {
+        color: $disabled;
+        cursor: not-allowed;
+        &:before {
+          border-color: $disabled !important;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+  & > span {
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    line-height: 16px;
+    font-weight: $font-light;
+    cursor: pointer;
+    padding-left: 22px;
+    width: 100%;
+    &:before {
+      cursor: pointer;
+      font-family: fontAwesome;
+      font-weight: $font-light;
+      font-size: 12px;
+      color: $default;
+      content: "\a0";
+      background-color: transparent;
+      border: 1px solid $default;
+      border-radius: 0;
+      display: inline-block;
+      text-align: center;
+      height: 16px;
+      line-height: 14px;
+      min-width: 16px;
+      margin-right: 6px;
+      position: relative;
+      top: 0;
+      margin-left: -22px;
+      float: left;
+    }
+    &:hover {
+      &:before {
+        border-color: $primary-bg;
+      }
+    }
+  }
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.cut-with-dots {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+label.custom-radio {
+  @extend .custom-checkbox;
+  & > input {
+    &:checked {
+      & + span {
+        &:before {
+          content: "\f111";
+        }
+      }
+    }
+  }
+  & > span {
+    &:before {
+      border-radius: 16px;
+      font-size: 9px;
+    }
+  }
+}
+
+@mixin customInput($color) {
+  & > span {
+    &:before {
+      color: $color;
+    }
+    &:hover {
+      &:before {
+        border-color: $color;
+      }
+    }
+  }
+}
+
+label.custom-input-primary {
+  @include customInput($primary);
+}
+
+label.custom-input-success {
+  @include customInput($success);
+}
+
+label.custom-input-warning {
+  @include customInput($warning)
+}
+
+label.custom-input-danger {
+  @include customInput($danger)
+}
+
+.form-horizontal {
+  .radio, .checkbox, .radio-inline, .checkbox-inline {
+    padding-top: 0px;
+  }
+}
+
+.input-demo {
+  line-height: 25px;
+}
+
+@mixin validationState($color, $focusColor) {
+  .control-label {
+    color: $color;
+  }
+  .form-control {
+    border: 1px solid $color;
+    &:focus {
+      box-shadow: none;
+      border-color: $focusColor;
+    }
+  }
+
+  label.custom-checkbox {
+    color: $color;
+    & > span {
+      &:before {
+        color: $color;
+      }
+      &:hover {
+        &:before {
+          border-color: $color;
+        }
+      }
+    }
+  }
+  .form-control-feedback {
+    color: $color;
+  }
+  .input-group-addon {
+    background-color: $color;
+    color: #ffffff;
+  }
+}
+
+.has-success {
+  @include validationState($success-bg, $success);
+}
+
+.has-warning {
+  @include validationState($warning-bg, $warning);
+}
+
+.has-error {
+  @include validationState($danger-bg, $danger);
+}
+
+.has-feedback label ~ .form-control-feedback {
+  top: 21px;
+  font-size: 18px;
+}
+
+.bootstrap-select {
+  .btn-default {
+    &:focus {
+      color: $default-text;
+    }
+  }
+}
+
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+  background: transparent;
+  color: $disabled;
+  border-color: $disabled-bg;
+  @include placeholderStyle($disabled, 1);
+}
+
+.form-control-rounded {
+  border-radius: 16px;
+}
+
+.help-block {
+  color: $help-text;
+}
+
+.help-block.error-block {
+  display: none;
+  .has-error &.basic-block {
+    display: block;
+  }
+}
+
+@mixin groupAddon($color) {
+  background: $color;
+  color: #ffffff;
+  border-color: $color;
+}
+
+.input-group-addon-danger {
+  @include groupAddon($danger);
+}
+
+.input-group-addon-warning {
+  @include groupAddon($warning);
+}
+
+.input-group-addon-success {
+  @include groupAddon($success);
+}
+
+.input-group-addon-primary {
+  @include groupAddon($primary);
+}
+
+.checkbox-demo-row {
+  margin-bottom: 12px;
+}
+
+.dropdown-menu {
+  border-radius: 5px;
+}
+
+.bootstrap-select {
+  .btn-default {
+    background: transparent;
+    color: $default;
+    &:focus {
+      background: #ffffff;
+      box-shadow: none;
+      outline: 0 !important;
+    }
+    &:active {
+      border-color: $default;
+      box-shadow: none;
+      background: #ffffff;
+    }
+  }
+  &.open {
+    .btn-default.dropdown-toggle {
+      box-shadow: none;
+      background-color: #ffffff;
+      border-color: $default;
+      color: $default;
+    }
+    .dropdown-menu {
+      border-left: 1px solid $default;
+      border-right: 1px solid $default;
+      border-bottom-color: $default;
+      border-radius: 0 0 5px 5px;
+    }
+    > .btn.dropdown-toggle {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-color: transparent;
+      box-shadow: none;
+    }
+    .dropdown-menu {
+      border-top: none;
+    }
+  }
+  &.with-search.open{
+    .btn-default.btn{
+      background-color: rgba(0, 0, 0, 0.2);
+      border-color: 1px solid $default;
+    }
+  }
+  &.with-search.open .btn-default + .dropdown-menu {
+    .bs-searchbox .form-control {
+      background-color: rgba(0, 0, 0, 0.35);
+    }
+    .no-results {
+      color: $default-text;
+    }
+  }
+  .notify {
+    color: $default-text;
+  }
+}
+
+.bootstrap-tagsinput {
+  background-color: transparent;
+  border: 1px solid $input-border;
+  box-shadow: none;
+  color: #555555;
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 26px;
+  width: 100%;
+  &.form-control {
+    display: block;
+    width: 100%;
+  }
+  .tag {
+    border-radius: 3px;
+    font-weight: $font-normal;
+    font-size: 11px;
+    padding: 4px 8px;
+    & [data-role="remove"]:hover {
+      box-shadow: none;
+    }
+  }
+  input {
+    line-height: 22px;
+    font-size: 11px;
+    min-width: 53px;
+  }
+}
+
+.progress-bar-primary {
+  background-color: $primary;
+}
+
+.progress-bar-success {
+  background-color: $success-light;
+}
+
+.progress-bar-warning {
+  background-color: $warning;
+}
+
+.progress-bar-danger {
+  background-color: $danger;
+}
+
+.has-success .input-group-addon {
+  border: none;
+}
+
+.input-group > span.addon-left {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.input-group > span.addon-right {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.sub-little-text{
+  font-size: 12px;
+}

src/app/theme/theme.scss

@@ -9,3 +9,4 @@
 @import "sass/preloader";
 @import "sass/socicon";
 @import "sass/table";
+@import "sass/form";