Project profile front refactor

app/partials/admin-project-features.jade

@@ -18,47 +18,67 @@ block content
 
             form
                 div.functionality(ng-class="{true:'active', false:''}[project.is_backlog_activated]")
-                    input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_backlog_activated")
                     div.icon.icon-backlog
                     div.desc
                         p
                             span Backlog
                             |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
+                        div.activate
+                            input.activate-input(type="checkbox", id="functionality-backlog", ng-model="project.is_backlog_activated")
+                            label.button.button-gray(ng-switch="project.is_backlog_activated", for="functionality-backlog")
+                                span(ng-switch-when="true") Disable
+                                span(ng-switch-when="false") Enable
 
                 div.functionality(ng-class="{true:'active', false:''}[project.is_kanban_activated]")
-                    input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_kanban_activated")
                     div.icon.icon-kanban
                     div.desc
                         p
                             span Kanban
                             |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
+                            div.activate
+                                input.activate-input(type="checkbox", id="functionality-kanban", ng-model="project.is_kanban_activated")
+                                label.button.button-gray(ng-switch="project.is_kanban_activated", for="functionality-kanban")
+                                    span(ng-switch-when="true") Disable
+                                    span(ng-switch-when="false") Enable
 
                 div.functionality(ng-class="{true:'active', false:''}[project.is_issues_activated]")
-                    input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_issues_activated")
                     div.icon.icon-issues
                     div.desc
                         p
                             span Issues
                             |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
+                        div.activate
+                            input.activate-input(type="checkbox", id="functionality-issues", ng-model="project.is_issues_activated")
+                            label.button.button-gray(ng-switch="project.is_issues_activated", for="functionality-issues")
+                                span(ng-switch-when="true") Disable
+                                span(ng-switch-when="false") Enable
 
                 div.functionality(ng-class="{true:'active', false:''}[project.is_wiki_activated]")
-                    input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_wiki_activated")
                     div.icon.icon-wiki
                     div.desc
                         p
                             span Wiki
                             |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
+                        div.activate
+                            input.activate-input(type="checkbox", id="functionality-wiki", ng-model="project.is_wiki_activated")
+                            label.button.button-gray(ng-switch="project.is_wiki_activated", for="functionality-wiki")
+                                span(ng-switch-when="true") Disable
+                                span(ng-switch-when="false") Enable
 
                 div.functionality(ng-class="{true:'active', false:''}[isVideoconferenceActivated]")
-                    input(type="checkbox", style="width:40px; height: 40px;", ng-model="isVideoconferenceActivated")
                     div.icon.icon-video
                     div.desc
                         p
                             span Video
                             |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus.
+                        div.activate
+                            input.activate-input(type="checkbox", id="functionality-video", ng-model="isVideoconferenceActivated")
+                            label.button.button-gray(ng-switch="isVideoconferenceActivated", for="functionality-video")
+                                span(ng-switch-when="true") Disable
+                                span(ng-switch-when="false") Enable
 
                         div.videoconference-attributes.hidden
                             select(ng-model="project.videoconferences", ng-options="e.id as e.name for e in [{'id':'appear-in', 'name':'AppearIn'},{'id':'talky', 'name': 'Talky'}]")
-                            input(ng-model="project.videoconferences_salt", placeholder="write a name for the chat room (ej. the name of the project)")
+                            input(type="text", ng-model="project.videoconferences_salt", placeholder="write a name for the chat room (ej. the name of the project)")
                 input(type="submit", class="hidden")
                 a.button.button-green(href="") Save

app/styles/components/buttons.scss

@@ -42,6 +42,7 @@ a.button-green {
     }
 }
 
+.button-gray,
 a.button-gray {
     background: $button-gray;
     &:hover {

app/styles/dependencies/mixins.scss

@@ -11,12 +11,12 @@
 
 // Table Flex - http://devbryce.com/site/flexbox/
 @mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
-    align-content: $align-content;
+    align-content: $align-content; // flex-start, flex-end, center, space-between, space-around, stretch
-    align-items: $align-items;
+    align-items: $align-items; //flex-start, flex-end, center, baseline, stretch
     display: $display;
-    flex-direction: $flex-direction;
+    flex-direction: $flex-direction; //row | row-reverse | column | column-reverse
-    flex-wrap: $flex-wrap;
+    flex-wrap: $flex-wrap; // nowrap | wrap | wrap-reverse
-    justify-content: $justify-content;
+    justify-content: $justify-content; //flex-start | flex-end | center | space-between | space-around
 }
 
 @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {

app/styles/modules/admin/admin-functionalities.scss

@@ -1,32 +1,50 @@
 .admin-functionalities {
     .functionality {
+        @include transition(all .2s linear);
+        @include table-flex();
         background-color: $whitish;
-        display: flex;
         margin-bottom: 1rem;
-        padding: 2rem;
-        .icon,
-        .desc {
         opacity: .5;
+        padding: 1rem;
+        position: relative;
+        &.active {
+            background-color: #e9f0da;
+            opacity: 1;
+            .icon {
+
+            }
+        }
+        .icon {
+            @include table-flex-child(1, 0, 0);
+            @include transform(translate(1rem, 1rem));
+        }
+        .desc {
+            @include table-flex-child(10 , 0, 0);
+        }
+        .activate-input {
+            display: none;
+            +label {
+                color: $white;
+                cursor: pointer;
             }
-        p {
-            margin-bottom: 0;
         }
         span {
             font-weight: bold;
         }
+        p {
+            margin-bottom: .5rem;
+        }
         select {
             margin-top: 1rem;
         }
-        &.active {
-            background-color: #e9f0da;
-            div,
-            p {
-                opacity: 1;
-            }
-        }
     }
     .icon {
         @extend %xxlarge;
         margin-right: 2rem;
     }
+    .videoconference-attributes {
+        select {
+            margin-bottom: .5rem;
+        }
+    }
 }

app/styles/modules/admin/admin-project-profile.scss

@@ -11,7 +11,7 @@
     label {
         @extend %title;
         display: block;
-        margin-bottom: .5rem;
+        margin-bottom: .2rem;
     }
     input[type="text"] {
         width: 50%;