Download as
Browse Code »

Commit 8f52051e872ee0c57212de98592e495811e3ef9b

Authored by Michel Felipe
1 parent a4e6d1f3
Exists in master and in 7 other branches cosmetic_changes_people_and_communities_block, forgot_password, profile-blocks-sass, profile_description_block_component, staging, translations, users_profile_page

First implementation of 'Config Layout bar'

Showing 3 changed files with 141 additions and 9 deletions   Show diff stats
src/app/layout/scss/_mixins.scss
  Diff comments   View file @8f52051
... ... @@ -48,3 +48,21 @@
48 48 outline-width: $width;
49 49 }
50 50 }
  51 +
  52 +@mixin keyframes($animation-name) {
  53 + @-webkit-keyframes #{$animation-name} {
  54 + @content;
  55 + }
  56 + @-moz-keyframes #{$animation-name} {
  57 + @content;
  58 + }
  59 + @-ms-keyframes #{$animation-name} {
  60 + @content;
  61 + }
  62 + @-o-keyframes #{$animation-name} {
  63 + @content;
  64 + }
  65 + @keyframes #{$animation-name} {
  66 + @content;
  67 + }
  68 +}
... ...
src/app/profile/toolbar.html
  Diff comments   View file @8f52051
1   -<div class="noosfero-main-toolbar" permission="vm.profile.permissions" permission-action="allow_edit">
  1 +<!-- <div class="noosfero-main-toolbar" permission="vm.profile.permissions" permission-action="allow_edit">
2 2 <noosfero-design-toggler
3 3 [icon-class]="'glyphicon glyphicon-wrench'"
4 4 [knob-label]="'designMode.label' | translate"
... ... @@ -6,4 +6,23 @@
6 6 [off-label]="'designMode.toggle.OFF' | translate"
7 7 class="pull-right"></noosfero-design-toggler>
8 8  
9   -</div>
10 9 \ No newline at end of file
  10 +</div> -->
  11 +<div id="config-tool" ng-class="{'closed': !showConfig}">
  12 + <a id="config-tool-cog" ng-click="showConfig = !showConfig">
  13 + <i class="fa fa-cog" ng-class="{'anim-icon': showConfig}"></i>
  14 + </a>
  15 +
  16 + <div id="config-tool-options">
  17 + <h4>Layout Options</h4>
  18 + <ul>
  19 + <li>
  20 + <noosfero-design-toggler
  21 + [icon-class]="'glyphicon glyphicon-wrench'"
  22 + [knob-label]="'designMode.label' | translate"
  23 + [on-label]="'designMode.toggle.ON' | translate"
  24 + [off-label]="'designMode.toggle.OFF' | translate"
  25 + class="pull-right"></noosfero-design-toggler>
  26 + </li>
  27 + </ul>
  28 + </div>
  29 +</div>
... ...
src/app/profile/toolbar.scss
  Diff comments   View file @8f52051
1   -.noosfero-main-toolbar {
2   - padding: 5px;
3   - @include make-row();
4   - margin-left: 0px;
5   - margin-right: 0px;
6   - background-color: #edecec;
7   -}
8 1 \ No newline at end of file
  2 +// .noosfero-main-toolbar {
  3 +// padding: 5px;
  4 +// @include make-row();
  5 +// margin-left: 0px;
  6 +// margin-right: 0px;
  7 +// background-color: #edecec;
  8 +// }
  9 +@import "../layout/scss/mixins";
  10 +
  11 +/* CONFIG TOOLS */
  12 +#config-tool {
  13 + @include transition(all 0.2s ease-in-out 0s);
  14 + position: fixed;
  15 + right: 0;
  16 + top: 120px;
  17 + width: 200px;
  18 + z-index: 1000;
  19 +}
  20 +#config-tool #config-tool-cog {
  21 + @include border-radius($border-radius-base 0 0 $border-radius-base);
  22 + @include transition(all 0.1s ease-in-out 0s);
  23 + background: #fff;
  24 + box-shadow: -3px 3px 3px -2px rgba(0, 0, 0, 0.1);
  25 + cursor: pointer;
  26 + left: -50px;
  27 + padding: 10px;
  28 + position: absolute;
  29 + text-align: center;
  30 + width: 50px;
  31 + top: 0;
  32 +}
  33 +#config-tool.closed #config-tool-cog i {
  34 +
  35 +}
  36 +#config-tool.closed #config-tool-cog:hover {
  37 + background-color: $primary-color;
  38 + color: #fff;
  39 +}
  40 +#config-tool #config-tool-cog i {
  41 + font-size: 2.2em;
  42 +}
  43 +
  44 +#config-tool #config-tool-options {
  45 + background: #fff;
  46 + box-shadow: -3px 3px 3px -2px rgba(0, 0, 0, 0.1);
  47 + padding: 15px;
  48 +}
  49 +#config-tool #config-tool-options h4 {
  50 + margin: 0;
  51 + font-size: 1.3em;
  52 +}
  53 +#config-tool #config-tool-options ul {
  54 + list-style: none;
  55 + padding: 15px 0 0;
  56 + margin: 0;
  57 +}
  58 +#config-tool #config-tool-options ul li {
  59 + padding: 4px 0;
  60 +}
  61 +#config-tool #config-tool-options ul li .checkbox {
  62 + margin: 0;
  63 +}
  64 +#config-tool.closed {
  65 + right: -200px;
  66 +}
  67 +#config-tool.opened {
  68 + right: 0;
  69 +}
  70 +#config-tool #skin-colors li {
  71 + display: block;
  72 + float: left;
  73 + padding: 3px !important;
  74 +}
  75 +#config-tool #skin-colors li a.skin-changer {
  76 + background: $primary-color;
  77 + display: block;
  78 + height: 30px;
  79 + width: 30px;
  80 + cursor: pointer;
  81 +}
  82 +#config-tool #skin-colors li a.skin-changer:hover {
  83 +
  84 +}
  85 +#config-tool #skin-colors li:nth-child(5) {
  86 + clear: left;
  87 +}
  88 +#config-tool #skin-colors li a.skin-changer.active {
  89 + border: 2px solid #ff0000;
  90 +}
  91 +
  92 +#config-tool-cog .anim-icon {
  93 + @include animation(rotating 0.7s ease-in-out 0s);
  94 +}
  95 +
  96 +@include keyframes(rotating) {
  97 + from {
  98 + transform: rotate(0deg);
  99 + }
  100 + to {
  101 + transform: rotate(360deg);
  102 + }
  103 +}
... ...