diff --git a/assets/css/components/posts/form.css b/assets/css/components/posts/form.css index fb865f3c..4d7b4705 100644 --- a/assets/css/components/posts/form.css +++ b/assets/css/components/posts/form.css @@ -26,7 +26,28 @@ display: none; } -.post-form-choice input:checked ~ span { +.post-form .post-form-choice input:checked ~ span { color: #72afd2; font-size: 110%; +} + +.post-form .post-visiblity-contener { + display: inline-block; + margin-right: 10px; +} + +.post-form .post-visiblity-contener label { + margin-left: 5px; +} + +.post-form .post-visiblity-contener input { + display: none; +} + +.post-form .post-visiblity-contener span { + color: #b5bbc8; +} + +.post-form .post-visiblity-contener input:checked ~ span { + color: #111111; } \ No newline at end of file diff --git a/assets/js/components/posts/form.js b/assets/js/components/posts/form.js index cda8dbdf..4eb55e41 100644 --- a/assets/js/components/posts/form.js +++ b/assets/js/components/posts/form.js @@ -74,11 +74,36 @@ ComunicWeb.components.posts.form = { //Survey var surveyType = this._add_post_type(postTypesContener, "survey", " "); + + //Add visibility levels + var rightDiv = createElem2({ + appendTo: boxBody, + type: "div", + class: "pull-right" + }) + + //Add visibility level choice + var visibility_choices_contener = createElem2({ + appendTo: rightDiv, + type: "div", + class: "post-visiblity-contener" + }); + + //Private post + var privateInput = this._add_visiblity_choice(visibility_choices_contener, "private", "Private", "fa-user"); + + //Friends-visible post + var friendsInput = this._add_visiblity_choice(visibility_choices_contener, "friends", "Friends", "fa-users"); + friendsInput.checked = true; + + //Worldwide post + this._add_visiblity_choice(visibility_choices_contener, "public", "Public", "fa-globe"); + //Add send button var sendButton = createElem2({ - appendTo: boxBody, + appendTo: rightDiv, type: "button", - class: "btn btn-primary pull-right", + class: "btn btn-primary", innerHTML: "Send" }); }, @@ -114,5 +139,41 @@ ComunicWeb.components.posts.form = { }); return input; - } + }, + + /** + * Create and add visibility level choice + * + * @param {HTMLElement} target The target for the visibility level + * @param {string} value The value of the visibility level + * @param {string} title The title of the visibility level + * @param {string} icon The name of the icon associated with the visibility level + * @return {HTMLElement} The created input + */ + _add_visiblity_choice: function(target, value, title, icon){ + + //Visibility label + var visibility_contener = createElem2({ + appendTo: target, + type: "label", + }); + + //Create input + var visibilityInput = createElem2({ + appendTo: visibility_contener, + type: "input", + elemType: "radio", + name: "post_visibility", + value: value + }); + + //Create icon + var visibility_label = createElem2({ + appendTo: visibility_contener, + type: "span", + innerHTML: "" + }); + + return visibilityInput; + }, } \ No newline at end of file