From 1b12e58ffe5b2326cd3f97242763661f9be50d66 Mon Sep 17 00:00:00 2001 From: gabemart Date: Tue, 6 Oct 2015 14:17:12 +0100 Subject: [PATCH] [#1746] Move "add org" button to typeahead --- akvo/rsr/static/scripts-src/myrsr-admin.js | 41 +++++++++++---------- akvo/rsr/static/scripts-src/myrsr-admin.jsx | 35 ++++++++---------- akvo/rsr/static/styles-src/main.css | 18 ++++++++- akvo/rsr/static/styles-src/main.scss | 26 ++++++++++++- akvo/templates/myrsr/project_editor.html | 3 -- 5 files changed, 77 insertions(+), 46 deletions(-) diff --git a/akvo/rsr/static/scripts-src/myrsr-admin.js b/akvo/rsr/static/scripts-src/myrsr-admin.js index ab2d2b0ee5..dc7c59148e 100644 --- a/akvo/rsr/static/scripts-src/myrsr-admin.js +++ b/akvo/rsr/static/scripts-src/myrsr-admin.js @@ -872,9 +872,21 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption selectorClass = document.querySelector('.' + selector); TypeaheadContainer = React.createClass({displayName: 'TypeaheadContainer', + + getInitialState: function() { + return ({focusClass: 'inactive'}); + }, + onKeyUp: function() { + if (inputType === 'org') { + this.setState({focusClass: 'active'}); + } + }, + onBlur: function() { + this.setState({focusClass: 'inactive'}); + }, render: function() { return ( - React.DOM.div(null, + React.DOM.div( {className:this.state.focusClass}, Typeahead( {placeholder:"", options:typeaheadOptions, @@ -883,6 +895,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption displayOption:displayOption, filterOption:filterOption, childID:selector, + onKeyUp:this.onKeyUp, + onBlur:this.onBlur, customClasses:{ typeahead: "", input: inputClass, @@ -894,7 +908,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption inputProps:{ name: selector, id: selector - }} ) + }} ), + React.DOM.div( {className:"addOrg", onMouseDown:addOrgModal}, "+Add organisation") ) ); } @@ -2110,23 +2125,6 @@ function setUnsavedChangesMessage() { }; } -/* Set each "add organisation" link to open the "add organisation" -** modal dialog on click */ - -function setModalOnClicks() { - var links = document.querySelectorAll('.add-organisation'); - - for (var i = 0; i < links.length; i++) { - var el = links[i]; - - el.removeEventListener('click'); - el.addEventListener('click', function(e) { - e.preventDefault(); - addOrgModal(); - }); - } -} - /* Show the "add organisation" modal dialog */ function addOrgModal() { @@ -2164,6 +2162,7 @@ function addOrgModal() { organisation_id = response.id; // Add location (fails silently) + // TODO: Check if location has all fields var request_loc; api_url = '/rest/v1/organisation_location/?format=json'; request_loc = new XMLHttpRequest(); @@ -2194,6 +2193,8 @@ function addOrgModal() { var response; response = JSON.parse(request.responseText); + // TODO: Scroll to top of modal + for (var key in response) { if (response.hasOwnProperty(key)) { var input = form.querySelector('#' + key); @@ -2213,6 +2214,7 @@ function addOrgModal() { request.onerror = function() { // There was a connection error of some sort + // TODO: Add better message on top of the modal elAddClass(form, 'has-error'); return false; }; @@ -2457,5 +2459,4 @@ document.addEventListener('DOMContentLoaded', function() { setAllSectionsCompletionPercentage(); setAllSectionsChangeListerner(); setPageCompletionPercentage(); - setModalOnClicks(); }); diff --git a/akvo/rsr/static/scripts-src/myrsr-admin.jsx b/akvo/rsr/static/scripts-src/myrsr-admin.jsx index c608d5862d..98eeecb868 100644 --- a/akvo/rsr/static/scripts-src/myrsr-admin.jsx +++ b/akvo/rsr/static/scripts-src/myrsr-admin.jsx @@ -872,9 +872,21 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption selectorClass = document.querySelector('.' + selector); TypeaheadContainer = React.createClass({ + + getInitialState: function() { + return ({focusClass: 'inactive'}); + }, + onKeyUp: function() { + if (inputType === 'org') { + this.setState({focusClass: 'active'}); + } + }, + onBlur: function() { + this.setState({focusClass: 'inactive'}); + }, render: function() { return ( -
+
+
+Add organisation
); } @@ -2110,23 +2125,6 @@ function setUnsavedChangesMessage() { }; } -/* Set each "add organisation" link to open the "add organisation" -** modal dialog on click */ - -function setModalOnClicks() { - var links = document.querySelectorAll('.add-organisation'); - - for (var i = 0; i < links.length; i++) { - var el = links[i]; - - el.removeEventListener('click'); - el.addEventListener('click', function(e) { - e.preventDefault(); - addOrgModal(); - }); - } -} - /* Show the "add organisation" modal dialog */ function addOrgModal() { @@ -2461,5 +2459,4 @@ document.addEventListener('DOMContentLoaded', function() { setAllSectionsCompletionPercentage(); setAllSectionsChangeListerner(); setPageCompletionPercentage(); - setModalOnClicks(); }); diff --git a/akvo/rsr/static/styles-src/main.css b/akvo/rsr/static/styles-src/main.css index cb23c82b71..a85018f64a 100755 --- a/akvo/rsr/static/styles-src/main.css +++ b/akvo/rsr/static/styles-src/main.css @@ -1962,8 +1962,22 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive margin-left: -1.25em; } } } /* Modal dialog stuff for the Project Editor */ -.btn.add-organisation { - margin-top: 10px; } +div.inactive .addOrg { + display: none; } + +div.active .addOrg { + display: block; + padding: 0.5em; + background-color: white; + border: 1px solid #c8c8c8; + border-radius: 0 0 4px 4px; + margin-top: -3px; + cursor: pointer; + color: #646464; } + div.active .addOrg:hover { + font-weight: bold; } + div.active .addOrg:active { + opacity: 0.8; } .modalBackground { position: fixed; diff --git a/akvo/rsr/static/styles-src/main.scss b/akvo/rsr/static/styles-src/main.scss index aa54045c7d..eb67a1df36 100755 --- a/akvo/rsr/static/styles-src/main.scss +++ b/akvo/rsr/static/styles-src/main.scss @@ -2534,8 +2534,30 @@ body { /* Modal dialog stuff for the Project Editor */ -.btn.add-organisation { - margin-top: 10px; +div.inactive { + .addOrg { + display: none; + } +} + +div.active { + .addOrg { + display: block; + padding: 0.5em; + background-color: white; + border: 1px solid rgb(200,200,200); + border-radius: 0 0 4px 4px; + margin-top: -3px; + cursor: pointer; + color: rgb(100,100,100); + + &:hover { + font-weight: bold; + } + &:active { + opacity: 0.8; + } + } } .modalBackground { diff --git a/akvo/templates/myrsr/project_editor.html b/akvo/templates/myrsr/project_editor.html index 184b5d5f3e..2c2c65bf5e 100644 --- a/akvo/templates/myrsr/project_editor.html +++ b/akvo/templates/myrsr/project_editor.html @@ -486,9 +486,6 @@
{% trans 'Reporting organisation' %}
{% trans 'Participating organisations' %}

{% trans 'Select an organisation that is playing a role in the project. If an organisation is not currently featured in RSR, please use the "Add a new organisation" button to add a new organisation to the database.' %}

-
{% for partnership in project.partnerships.all %} {% include "myrsr/project_editor_partials/partner_input.html" with key=partnership.pk %}