diff --git a/settings/css/settings.css b/settings/css/settings.css index 9008ba5a98..fe3518ae6a 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -8,8 +8,6 @@ input#openid, input#webdav { width:20em; } /* PERSONAL */ #avatar { - display: inline-block; - float: left; width: 160px; padding-right: 0; } @@ -63,6 +61,46 @@ input#openid, input#webdav { width:20em; } float: right; } +#personal-settings-avatar-container { + float: left; +} +#personal-settings-container { + position: relative; + float: left; + min-width: 280px; + width: calc(100% - 200px); +} +#personal-settings-container:after { + clear: both; +} +#personal-settings-container > div { + float: left; + height: 100px; + min-width: 300px; +} +#personal-settings-container > div h2 span[class^="icon-"] { + display: inline-block; + margin-left: 5px; + background-size: 110%; + opacity: 0.3; + cursor: pointer; +} +.personal-settings-setting-box input[type="text"], +.personal-settings-setting-box input[type="email"], +.personal-settings-setting-box input[type="tel"] { + width: 17em; +} +.federationScopeMenu { + top: 66px; +} +.federationScopeMenu.bubble::after { + left: 45px; +} +.federationScopeMenu.popovermenu { + font-weight: 100; + font-size: medium; +} + #displaynameform, #lostpassword, #groups, @@ -104,10 +142,6 @@ input#openid, input#webdav { width:20em; } input#identity { width: 20em; } -#displayName, -#email { - width: 17em; -} #showWizard { display: inline-block; diff --git a/settings/js/federationscopemenu.js b/settings/js/federationscopemenu.js new file mode 100644 index 0000000000..6eb9afb54e --- /dev/null +++ b/settings/js/federationscopemenu.js @@ -0,0 +1,114 @@ +/* + * Copyright (c) 2016 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +/* global OC, Handlebars */ + +(function() { + + var TEMPLATE_MENU = + ''; + + /** + * Construct a new FederationScopeMenu instance + * @constructs FederationScopeMenu + * @memberof OC.Settings + */ + var FederationScopeMenu = OC.Backbone.View.extend({ + tagName: 'div', + className: 'federationScopeMenu popovermenu bubble hidden open menu', + _scopes: [ + { + name: 'private', + displayName: t('core', 'Private'), + icon: OC.imagePath('core', 'actions/password') + }, + { + name: 'contacts', + displayName: t('core', 'Contacts'), + icon: OC.imagePath('core', 'places/contacts-dark') + }, + { + name: 'public', + displayName: t('core', 'Public'), + icon: OC.imagePath('core', 'places/link') + } + ], + + /** + * Current context + * + * @type OCA.Files.FileActionContext + */ + _context: null, + + events: { + 'click a.action': '_onClickAction' + }, + + template: Handlebars.compile(TEMPLATE_MENU), + + /** + * Event handler whenever an action has been clicked within the menu + * + * @param {Object} event event object + */ + _onClickAction: function(event) { + var $target = $(event.currentTarget); + if (!$target.hasClass('menuitem')) { + $target = $target.closest('.menuitem'); + } + + this.trigger('select:scope', $target.data('action')); + + OC.hideMenus(); + }, + + /** + * Renders the menu with the currently set items + */ + render: function() { + this.$el.html(this.template({ + items: this._scopes + })); + }, + + /** + * Displays the menu + */ + show: function(context) { + this._context = context; + + this.render(); + this.$el.removeClass('hidden'); + + OC.showMenu(null, this.$el); + } + }); + + OC.Settings = OC.Settings || {}; + OC.Settings.FederationScopeMenu = FederationScopeMenu; + +})(); + diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js new file mode 100644 index 0000000000..cf5158fa78 --- /dev/null +++ b/settings/js/federationsettingsview.js @@ -0,0 +1,116 @@ +/* global OC */ + +/** + * Copyright (c) 2016, Christoph Wurst + * + * This file is licensed under the Affero General Public License version 3 or later. + * See the COPYING-README file. + */ + +(function() { + 'use strict'; + + var FederationSettingsView = OC.Backbone.View.extend({ + _inputFields: undefined, + + /** @var Backbone.Model */ + _config: undefined, + + initialize: function(options) { + options = options || {}; + + if (options.config) { + this._config = options.config; + } else { + this._config = new OC.Backbone.Model() + } + + this._inputFields = [ + 'displayname', + 'phone', + 'email', + 'website', + 'address' + ]; + + this._registerEvents(); + }, + + render: function() { + var self = this; + _.each(this._inputFields, function(field) { + var $heading = self.$('#' + field + 'form > h2'); + var $icon = self.$('#' + field + 'form > h2 > span'); + var scopeMenu = new OC.Settings.FederationScopeMenu(); + + self.listenTo(scopeMenu, 'select:scope', function(scope) { + self._onScopeChanged(field, scope); + }); + $heading.append(scopeMenu.$el); + $icon.on('click', _.bind(scopeMenu.show, scopeMenu)); + + // Fix absolute position according to the heading text length + // TODO: fix position without magic numbers + var pos = ($heading.width() - $heading.find('label').width()) - 68; + scopeMenu.$el.css('right', pos); + }); + }, + + _registerEvents: function() { + var self = this; + _.each(this._inputFields, function(field) { + self.$('#' + field).keyUpDelayedOrEnter(_.bind(self._onInputChanged, self)); + }); + }, + + _onInputChanged: function(e) { + OC.msg.startSaving('#personal-settings-container .msg'); + var $target = $(e.target); + var value = $target.val(); + var field = $target.attr('id'); + console.log(field + ' changed to ' + value); + this._config.set(field, value); + console.log(this._config.toJSON()); + // TODO: this._config.save(); + // TODO: OC.msg.finishedSaving('#personal-settings-container .msg', result); + // TODO: call _updateDisplayName after successful update + }, + + _updateDisplayName: function(displayName) { + // update displayName on the top right expand button + $('#expandDisplayName').text($('#displayName').val()); + // update avatar if avatar is available + if(!$('#removeavatar').hasClass('hidden')) { + updateAvatar(); + } + }, + + _onScopeChanged: function(field, scope) { + // TODO: save changes to the server + console.log(field + ' changed to ' + scope); + + this._setFieldScopeIcon(field, scope); + }, + + _setFieldScopeIcon: function(field, scope) { + var $icon = this.$('#' + field + 'form > h2 > span'); + $icon.removeClass('icon-password'); + $icon.removeClass('icon-contacts-dark'); + $icon.removeClass('icon-link'); + switch (scope) { + case 'private': + $icon.addClass('icon-password'); + break; + case 'contacts': + $icon.addClass('icon-contacts-dark'); + break; + case 'public': + $icon.addClass('icon-link'); + break; + } + } + }); + + OC.Settings = OC.Settings || {}; + OC.Settings.FederationSettingsView = FederationSettingsView; +})(); \ No newline at end of file diff --git a/settings/js/personal.js b/settings/js/personal.js index c2cb437bd1..7a8d43d147 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -1,10 +1,15 @@ +/* global OC */ + /** * Copyright (c) 2011, Robin Appelman * 2013, Morris Jobke + * 2016, Christoph Wurst * This file is licensed under the Affero General Public License version 3 or later. * See the COPYING-README file. */ +OC.Settings = OC.Settings || {}; + /** * The callback will be fired as soon as enter is pressed by the * user or 1 second after the last data entry @@ -21,21 +26,21 @@ jQuery.fn.keyUpDelayedOrEnter = function (callback, allowEmptyValue) { return; } if (allowEmptyValue || that.val() !== '') { - cb(); + cb(event); } }, 1000)); this.keypress(function (event) { if (event.keyCode === 13 && (allowEmptyValue || that.val() !== '')) { event.preventDefault(); - cb(); + cb(event); } }); - this.bind('paste', null, function (e) { - if(!e.keyCode){ + this.bind('paste', null, function (event) { + if(!event.keyCode){ if (allowEmptyValue || that.val() !== '') { - cb(); + cb(event); } } }); @@ -265,8 +270,10 @@ $(document).ready(function () { } }); - $('#displayName').keyUpDelayedOrEnter(changeDisplayName); - $('#email').keyUpDelayedOrEnter(changeEmailAddress, true); + var federationSettingsView = new OC.Settings.FederationSettingsView({ + el: '#personal-settings-container' + }); + federationSettingsView.render(); $("#languageinput").change(function () { // Serialize the data @@ -452,3 +459,5 @@ OC.Encryption.msg = { } } }; + +OC.Settings.updateAvatar = updateAvatar; diff --git a/settings/personal.php b/settings/personal.php index 01c358de3a..1780dddb55 100644 --- a/settings/personal.php +++ b/settings/personal.php @@ -47,7 +47,9 @@ $urlGenerator = \OC::$server->getURLGenerator(); OC_Util::addScript('settings', 'authtoken'); OC_Util::addScript('settings', 'authtoken_collection'); OC_Util::addScript('settings', 'authtoken_view'); -OC_Util::addScript( 'settings', 'personal' ); +OC_Util::addScript('settings', 'federationsettingsview'); +OC_Util::addScript('settings', 'federationscopemenu'); +OC_Util::addScript('settings', 'personal'); OC_Util::addScript('settings', 'certificates'); OC_Util::addStyle( 'settings', 'settings' ); \OC_Util::addVendorScript('strengthify/jquery.strengthify'); diff --git a/settings/templates/personal.php b/settings/templates/personal.php index 8f34d7b87b..4fb9cefdeb 100644 --- a/settings/templates/personal.php +++ b/settings/templates/personal.php @@ -33,44 +33,94 @@ -
-

t('Profile picture')); ?>

-
-
- - - -
- - -

t('png or jpg, max. 20 MB')); ?>

- - t('Picture provided by original account')); ?> - -
+
+ +

t('Profile picture')); ?>

+
+
+ + + +
+ + +

t('png or jpg, max. 20 MB')); ?>

+ + t('Picture provided by original account')); ?> + +
- -
-

- -

- - - -
+
+
+
+

+ + +

+ +
+
+
+
+

+ + +

+ +
+
+
+
+

+ + +

+ +
+ t('For password recovery and notifications')); ?> +
+
+
+
+

+ + +

+ +
+
+
+
+

+ + +

+ +
+
+ +
@@ -99,10 +149,13 @@ if($_['displayNameChangeSupported']) { +======= +>>>>>>> Add more personal information fields to the settings page for enhanced federated sharing

t('Email'); ?>

t('No email address set')); }?>
+