Commit 9f5c1aa1ff115e8e76be0e77e120d1b726cf5602
1 parent
b7f58749
correções sugeridas no merge request !39
Showing
7 changed files
with
63 additions
and
35 deletions
Show diff stats
src/app/admin/layout-edit/designModeToggler.component.ts
| 1 | -import {Component, Inject} from 'ng-forward'; | 1 | +import {Component, Inject, Input} from 'ng-forward'; |
| 2 | import {DesignModeService} from './designMode.service'; | 2 | import {DesignModeService} from './designMode.service'; |
| 3 | @Component({ | 3 | @Component({ |
| 4 | selector: 'noosfero-design-toggler', | 4 | selector: 'noosfero-design-toggler', |
| 5 | - templateUrl: 'app/admin/layout-edit/designModeToggler.html' | 5 | + templateUrl: 'app/admin/layout-edit/designModeToggler.html', |
| 6 | + inputs: ['knobLabel', 'onLabel', 'offLabel'] | ||
| 6 | }) | 7 | }) |
| 7 | -@Inject(DesignModeService) | 8 | +@Inject(DesignModeService, '$sce') |
| 8 | export class DesignModeTogglerComponent { | 9 | export class DesignModeTogglerComponent { |
| 9 | 10 | ||
| 10 | - icon: string = " <i class='glyphicon glyphicon-wrench'></i> "; | 11 | + @Input() iconClass: string = ''; |
| 12 | + @Input() knobLabel: string = ''; | ||
| 13 | + @Input() offLabel: string = ''; | ||
| 14 | + @Input() onLabel: string = ''; | ||
| 11 | 15 | ||
| 12 | - constructor(private designModeService: DesignModeService) { | 16 | + |
| 17 | + constructor(private designModeService: DesignModeService, private $sce: ng.ISCEService) { | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + get icon(): string { | ||
| 21 | + if (this.iconClass && this.iconClass.trim().length > 0 ) { | ||
| 22 | + return '<i class=\'design-toggle-icon ' + this.iconClass + '\'></i>'; | ||
| 23 | + } | ||
| 24 | + else { | ||
| 25 | + return ''; | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + | ||
| 29 | + getKnobLabel(): string { | ||
| 30 | + return this.$sce.trustAsHtml(this.icon + this.knobLabel); | ||
| 13 | } | 31 | } |
| 14 | 32 | ||
| 15 | private _inDesignMode: boolean = false; | 33 | private _inDesignMode: boolean = false; |
src/app/admin/layout-edit/designModeToggler.html
| 1 | <toggle-switch | 1 | <toggle-switch |
| 2 | html="true" | 2 | html="true" |
| 3 | ng-model="ctrl.inDesignMode" | 3 | ng-model="ctrl.inDesignMode" |
| 4 | - on-label="{{'designMode.toggle.ON' | translate}}" | ||
| 5 | - off-label="{{'designMode.toggle.OFF' | translate}}" | 4 | + on-label="{{ctrl.onLabel}}" |
| 5 | + off-label="{{ctrl.offLabel}}" | ||
| 6 | class="switch-small" | 6 | class="switch-small" |
| 7 | - knob-label="{{ ctrl.icon + ('designMode.label' | translate) }}"> | 7 | + knob-label="{{ ctrl.getKnobLabel() }}"> |
| 8 | </toggle-switch> | 8 | </toggle-switch> |
| 9 | \ No newline at end of file | 9 | \ No newline at end of file |
| @@ -0,0 +1,23 @@ | @@ -0,0 +1,23 @@ | ||
| 1 | +ul.nav > li.toggler-container { | ||
| 2 | + position: relative; | ||
| 3 | + padding-top: 12px; | ||
| 4 | +} | ||
| 5 | + | ||
| 6 | +body.noosfero-design-on { | ||
| 7 | + | ||
| 8 | + div.content-wrapper { | ||
| 9 | + opacity: 0.5; | ||
| 10 | + } | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | + | ||
| 14 | + | ||
| 15 | +noosfero-design-toggler .ats-switch .knob i { | ||
| 16 | + color: #999999; | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | + | ||
| 20 | +.design-toggle-icon { | ||
| 21 | + margin-left: 3px; | ||
| 22 | + margin-right: 3px; | ||
| 23 | +} | ||
| 0 | \ No newline at end of file | 24 | \ No newline at end of file |
src/app/layout/scss/_layout.scss
| @@ -35,24 +35,3 @@ | @@ -35,24 +35,3 @@ | ||
| 35 | padding: 0 20px 20px 20px; | 35 | padding: 0 20px 20px 20px; |
| 36 | } | 36 | } |
| 37 | } | 37 | } |
| 38 | - | ||
| 39 | - | ||
| 40 | -body.noosfero-design-on { | ||
| 41 | - | ||
| 42 | - div.content-wrapper { | ||
| 43 | - opacity: 0.5; | ||
| 44 | - } | ||
| 45 | -} | ||
| 46 | - | ||
| 47 | -ul.nav > li.toggler-container { | ||
| 48 | - position: relative; | ||
| 49 | - padding-top: 12px; | ||
| 50 | -} | ||
| 51 | - | ||
| 52 | -.noosfero-main-toolbar { | ||
| 53 | - padding: 5px; | ||
| 54 | - @include make-row(); | ||
| 55 | - margin-left: 0px; | ||
| 56 | - margin-right: 0px; | ||
| 57 | - background-color: #edecec; | ||
| 58 | -} | ||
| 59 | \ No newline at end of file | 38 | \ No newline at end of file |
src/app/layout/scss/skins/_whbl.scss
| @@ -282,11 +282,7 @@ $whbl-font-color: #16191c; | @@ -282,11 +282,7 @@ $whbl-font-color: #16191c; | ||
| 282 | background-color: #fff; | 282 | background-color: #fff; |
| 283 | } | 283 | } |
| 284 | 284 | ||
| 285 | - noosfero-design-toggler .ats-switch .knob i { | ||
| 286 | - color: #999999; | ||
| 287 | - } | ||
| 288 | - | ||
| 289 | - .ats-switch .knob { | 285 | + .ats-switch .knob { |
| 290 | padding-right: 15px; | 286 | padding-right: 15px; |
| 291 | } | 287 | } |
| 292 | 288 |
src/app/profile/toolbar.html
| 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 | - <noosfero-design-toggler class="pull-right"></noosfero-design-toggler> | 2 | + <noosfero-design-toggler |
| 3 | + [icon-class]="'glyphicon glyphicon-wrench'" | ||
| 4 | + [knob-label]="'designMode.label' | translate" | ||
| 5 | + [on-label]="'designMode.toggle.ON' | translate" | ||
| 6 | + [off-label]="'designMode.toggle.OFF' | translate" | ||
| 7 | + class="pull-right"></noosfero-design-toggler> | ||
| 3 | 8 | ||
| 4 | </div> | 9 | </div> |
| 5 | \ No newline at end of file | 10 | \ No newline at end of file |