diff --git a/bower.json b/bower.json index 5f420db..4d7cd7a 100644 --- a/bower.json +++ b/bower.json @@ -39,7 +39,8 @@ "angular-click-outside": "^2.7.1", "ng-ckeditor": "^0.2.1", "angular-bootstrap-toggle-switch": "^0.5.6", - "angular-tag-cloud": "^0.3.0" + "angular-tag-cloud": "^0.3.0", + "angular-ui-switch": "^0.1.1" }, "devDependencies": { "angular-mocks": "~1.5.0" diff --git a/src/app/admin/layout-edit/designModeToggler.component.spec.ts b/src/app/admin/layout-edit/designModeToggler.component.spec.ts index b131175..015998d 100644 --- a/src/app/admin/layout-edit/designModeToggler.component.spec.ts +++ b/src/app/admin/layout-edit/designModeToggler.component.spec.ts @@ -1,17 +1,18 @@ import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper'; +import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions'; import * as helpers from '../../../spec/helpers'; import {DesignModeTogglerComponent} from './designModeToggler.component'; import {DesignModeService} from './designMode.service'; import {INoosferoLocalStorage} from "./../../shared/models/interfaces"; describe('DesignModeToggler Component', () => { - const htmlTemplate: string = ''; + const htmlTemplate: string = ''; let helper: ComponentTestHelper; beforeEach(() => { angular.mock.module('templates'); angular.mock.module('ngSanitize'); - angular.mock.module('toggle-switch'); + angular.mock.module('uiSwitch'); }); let designModeService: DesignModeService; @@ -30,12 +31,12 @@ describe('DesignModeToggler Component', () => { }); it('changes css classes representing the switch is on or off', () => { - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy(); - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy(); + let switchEl: INgForwardJQuery = helper.debugElement.query('span.switch'); + + expect(switchEl.hasClass('checked')).toBeFalsy(); helper.component.inDesignMode = true; helper.detectChanges(); - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy(); - expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy(); + expect(switchEl.hasClass('checked')).toBeTruthy(); }); it('emits event with value "true" when changing inDesignMode to On', (done) => { @@ -60,4 +61,4 @@ describe('DesignModeToggler Component', () => { helper.component.inDesignMode = false; helper.detectChanges(); }); -}); \ No newline at end of file +}); diff --git a/src/app/admin/layout-edit/designModeToggler.component.ts b/src/app/admin/layout-edit/designModeToggler.component.ts index 61b8e21..bcd69f7 100644 --- a/src/app/admin/layout-edit/designModeToggler.component.ts +++ b/src/app/admin/layout-edit/designModeToggler.component.ts @@ -3,17 +3,12 @@ import {DesignModeService} from './designMode.service'; import {AuthService, AuthEvents} from '../../login'; @Component({ - selector: 'noosfero-design-toggler', + selector: 'design-toggler', templateUrl: 'app/admin/layout-edit/designModeToggler.html' }) @Inject(DesignModeService, AuthService, '$sce') export class DesignModeTogglerComponent { - @Input() iconClass: string = ''; - @Input() knobLabel: string = ''; - @Input() offLabel: string = ''; - @Input() onLabel: string = ''; - private _inDesignMode: boolean = false; constructor(private designModeService: DesignModeService, private authService: AuthService, private $sce: ng.ISCEService) { @@ -22,19 +17,6 @@ export class DesignModeTogglerComponent { }); } - get icon(): string { - if (this.iconClass && this.iconClass.trim().length > 0) { - return ''; - } - else { - return ''; - } - } - - getKnobLabel(): string { - return this.$sce.trustAsHtml(this.icon + this.knobLabel); - } - get inDesignMode(): boolean { return this.designModeService.isInDesignMode(); }; diff --git a/src/app/admin/layout-edit/designModeToggler.html b/src/app/admin/layout-edit/designModeToggler.html index 74037df..c593c6b 100644 --- a/src/app/admin/layout-edit/designModeToggler.html +++ b/src/app/admin/layout-edit/designModeToggler.html @@ -1,8 +1 @@ - - \ No newline at end of file + diff --git a/src/app/admin/layout-edit/designModeToggler.scss b/src/app/admin/layout-edit/designModeToggler.scss index 02753f9..732ee37 100644 --- a/src/app/admin/layout-edit/designModeToggler.scss +++ b/src/app/admin/layout-edit/designModeToggler.scss @@ -1,7 +1,7 @@ -ul.nav > li.toggler-container { - position: relative; - padding-top: 12px; -} +$off-text: #949494; +$off-color: #EFEFEF; +$blue-color: #36B4F6; +$red-color: #DF3B3A; body.noosfero-design-on { @@ -10,14 +10,46 @@ body.noosfero-design-on { } } +.switch { + @include not-select(); + background-color: $off-color; + &[on][off] { + width: 60px; + } -noosfero-design-toggler .ats-switch .knob i { - color: #999999; -} + &:focus { + outline: none; + } + + &.checked small { + left: initial; + right: 0px; + } + + &.blue.checked { + background: $blue-color; + border-color: $blue-color; + } + &.red.checked { + background: $red-color; + border-color: $red-color; + } -.design-toggle-icon { - margin-left: 3px; - margin-right: 3px; -} \ No newline at end of file + %switch-label { + font-weight: bold; + } + + .on { + @extend %switch-label; + } + + .off { + @extend %switch-label; + right: 2px; + top: 25%; + color: $off-text; + text-align: center; + } +} diff --git a/src/app/layout/scss/_mixins.scss b/src/app/layout/scss/_mixins.scss index 6452d62..fa01253 100644 --- a/src/app/layout/scss/_mixins.scss +++ b/src/app/layout/scss/_mixins.scss @@ -4,6 +4,12 @@ background-clip: padding-box; /* stops bg color from leaking outside the border: */ } +@mixin box-shadow($args...) { + -webkit-box-shadow: $args; + -moz-box-shadow: $args; + box-shadow: $args; +} + @mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) { width: $width; height: $height; @@ -49,6 +55,16 @@ } } +@mixin not-select() { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + not supported by any browser */ +} + @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index 76a5e45..553524a 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -115,7 +115,7 @@ export class EnvironmentContent { "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid", "angular-timeline", "duScroll", "oitozero.ngSweetAlert", "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad", - "angular-click-outside", "toggle-switch", "ngTagCloud", "noosfero.init"] + "angular-click-outside", "toggle-switch", "ngTagCloud", "noosfero.init", "uiSwitch"] }) @StateConfig([ { diff --git a/src/app/profile/config-bar.component.ts b/src/app/profile/config-bar.component.ts new file mode 100644 index 0000000..b85dc2c --- /dev/null +++ b/src/app/profile/config-bar.component.ts @@ -0,0 +1,21 @@ +import {Component, Inject, provide} from "ng-forward"; +import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service"; + +@Component({ + selector: "configbar", + templateUrl: "app/profile/configbar.html", + providers: [ + provide('profileService', { useClass: ProfileService }) + ] +}) +@Inject(ProfileService) +export class ConfigBarComponent { + profile: noosfero.Profile; + parentId: number; + + constructor(profileService: ProfileService) { + profileService.getCurrentProfile().then((profile: noosfero.Profile) => { + this.profile = profile; + }); + } +} diff --git a/src/app/profile/configbar.html b/src/app/profile/configbar.html new file mode 100644 index 0000000..a24c047 --- /dev/null +++ b/src/app/profile/configbar.html @@ -0,0 +1,21 @@ +
+ + + + +
+

{{ 'configbar.label' | translate }}

+
{{ 'configbar.section.layout' | translate }}
+
    +
  • + + +
    • +
+
+
diff --git a/src/app/profile/configbar.scss b/src/app/profile/configbar.scss new file mode 100644 index 0000000..3442ca4 --- /dev/null +++ b/src/app/profile/configbar.scss @@ -0,0 +1,102 @@ +@import "../layout/scss/mixins"; + +@include keyframes(rotating) { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* CONFIG TOOLS */ +#config-tool { + @include transition(all 0.2s ease-in-out 0s); + @include box-shadow(0px 1px 4px rgba(0, 0, 0, 0.3)); + position: fixed; + right: 0; + top: 120px; + min-width: 200px; + z-index: 1000; + + #config-tool-cog { + @include border-radius($border-radius-base 0 0 $border-radius-base); + @include transition(all 0.1s ease-in-out 0s); + @include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1)); + background: #fff; + cursor: pointer; + left: -50px; + padding: 10px; + position: absolute; + text-align: center; + width: 50px; + top: 0; + + i { + font-size: 2.2em; + } + + .anim-icon { + @include animation(rotating 0.7s ease-in-out 0s); + } + } + + &.closed { + right: -280px; + box-shadow: none; + + #config-tool-cog { + &:hover { + background-color: $primary-color; + color: #fff; + } + } + } + + &.opened { + right: 0; + } + + .section-title { + font-size: 15px; + font-weight: bold; + margin: 30px 0 5px; + } + + #config-tool-options { + @include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1)); + background: #fff; + padding: 15px; + + h4 { + margin: 0; + font-size: 1.3em; + } + + ul { + list-style: none; + border-radius: 2px; + background-clip: padding-box; + background-color: #f1f3f2; + padding: 0; + + li { + font-size: 13px; + font-weight: 300; + padding: 10px; + width: 250px; + min-height: 50px; + + .checkbox { + margin: 0; + } + + .pull-left { + margin-top: 8px; + font-weight: normal; + } + + } + } + } +} diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts index a3bc9ab..a84fc3b 100644 --- a/src/app/profile/profile.component.ts +++ b/src/app/profile/profile.component.ts @@ -10,7 +10,7 @@ import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service"; import {NotificationService} from "../shared/services/notification.service"; import {MyProfileComponent} from "./myprofile.component"; import {ProfileActionsComponent} from "./profile-actions.component"; -import {ProfileToolbarComponent} from "./profile-toolbar.component"; +import {ConfigBarComponent} from "./config-bar.component"; /** * @ngdoc controller * @name profile.Profile @@ -44,8 +44,8 @@ import {ProfileToolbarComponent} from "./profile-toolbar.component"; controllerAs: "vm" }, "toolbar@main": { - templateUrl: "app/profile/toolbar.html", - controller: ProfileToolbarComponent, + templateUrl: "app/profile/configbar.html", + controller: ConfigBarComponent, controllerAs: "vm" } } @@ -61,8 +61,8 @@ import {ProfileToolbarComponent} from "./profile-toolbar.component"; controllerAs: "vm" }, "toolbar@main": { - templateUrl: "app/profile/toolbar.html", - controller: ProfileToolbarComponent, + templateUrl: "app/profile/configbar.html", + controller: ConfigBarComponent, controllerAs: "vm" } } @@ -118,8 +118,8 @@ import {ProfileToolbarComponent} from "./profile-toolbar.component"; controllerAs: "vm" }, "toolbar@main": { - templateUrl: "app/profile/toolbar.html", - controller: ProfileToolbarComponent, + templateUrl: "app/profile/configbar.html", + controller: ConfigBarComponent, controllerAs: "vm" } } diff --git a/src/languages/en.json b/src/languages/en.json index d3b6ce5..ec23074 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -6,6 +6,8 @@ "navbar.logout": "Log Out", "navbar.login": "Login", "navbar.toggle_menu": "Toggle navigation", + "configbar.label": "Configuration", + "configbar.section.layout": "Layout", "language.all": "All languages", "language.en": "English", "language.pt": "Portuguese", @@ -77,9 +79,7 @@ "custom_content.title": "Edit content", "profile.custom_header.label": "Header", "profile.custom_footer.label": "Footer", - "designMode.label": "In Design", - "designMode.toggle.ON": "ON", - "designMode.toggle.OFF": "OFF", + "designMode.label": "Design mode", "search.results.summary": "{results, plural, one{result} other{# results}}", "search.results.query.label": "Search therm:", "search.label": "Search", diff --git a/src/languages/pt.json b/src/languages/pt.json index 15e60a2..3676b51 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -6,6 +6,8 @@ "navbar.logout": "Sair", "navbar.login": "Login", "navbar.toggle_menu": "Abrir Menu", + "configbar.label": "Configurações", + "configbar.section.layout": "Visual", "language.all": "Todos os idiomas", "language.en": "Inglês", "language.pt": "Português", @@ -77,9 +79,7 @@ "custom_content.title": "Editar conteúdo", "profile.custom_header.label": "Cabeçalho", "profile.custom_footer.label": "Rodapé", - "designMode.label": "Modo de Edição", - "designMode.toggle.ON": "Ligado", - "designMode.toggle.OFF": "Desligado", + "designMode.label": "Alterar design", "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}", "search.results.query.label": "Termo da busca:", "search.label": "Pesquisar", -- libgit2 0.21.2