Created settings page

This commit is contained in:
Pierre 2018-04-12 16:17:41 +02:00
parent 71932197fa
commit 991a950a42
7 changed files with 165 additions and 0 deletions

View File

@ -0,0 +1,11 @@
/**
* Main settings styleesheet
*
* @author Pierre HUBERT
*/
.settings-page-container {
max-width: 1000px;
margin: auto;
margin-top: 10px;
}

View File

@ -1057,6 +1057,26 @@ var ComunicWeb = {
}, },
/**
* User settings page
*/
settings: {
/**
* Main script
*/
main: {
//TODO : implement
},
/**
* Navigation pane
*/
navigationPane: {
//TODO : implement
},
},
/** /**
* Login controller * Login controller
*/ */

View File

@ -75,6 +75,20 @@ ComunicWeb.components.menuBar.authenticated = {
dropdownContent.className = "dropdown-menu" dropdownContent.className = "dropdown-menu"
dropdownContent.setAttribute("role", "menu"); dropdownContent.setAttribute("role", "menu");
//Add settings link
var settingsButton = createElem2({
appendTo: dropdownContent,
type: "li"
});
var settingsLink = createElem2({
appendTo: settingsButton,
type: "a",
innerHTML: "Settings"
});
settingsButton.onclick = function(){
openPage("settings");
};
//Add logout link //Add logout link
var logoutButton = createElem("li", dropdownContent); var logoutButton = createElem("li", dropdownContent);
var logoutButtonLink = createElem("a", logoutButton); var logoutButtonLink = createElem("a", logoutButton);

View File

@ -0,0 +1,39 @@
/**
* User settings main script file
*
* @author Pierre HUBERT
*/
ComunicWeb.pages.settings.main = {
/**
* Open settings page
*
* @param {object} args Optionnal arguments
* @param {HTMLElement} target The target for the page
*/
open: function(args, target){
//Settings page is organized like an array with two columns
//Left column : settings sections menu
//Rigth column : current settings section
//Create a row
var row = createElem2({
appendTo: target,
type: "div",
class: "row settings-page-container"
});
//Left area
var leftArea = createElem2({
appendTo: row,
type: "div",
class: "col-md-3"
});
//Display left navigation pane
ComunicWeb.pages.settings.navigationPane.display(leftArea);
},
}

View File

@ -0,0 +1,65 @@
/**
* Settings navigation pane
*
* @author Pierre HUBERT
*/
ComunicWeb.pages.settings.navigationPane = {
/**
* Display the settings navigation pane
*
* @param {HTMLElement} target The target for the navigation pane
*/
display: function(target){
//Create a box
var navigationBox = createElem2({
appendTo: target,
type: "div",
class: "box box-solid"
});
//Set box header
var boxHeader = createElem2({
appendTo: navigationBox,
type: "div",
class: "box-header with-border",
});
//Set box title
createElem2({
appendTo: boxHeader,
type: "h3",
class: "box-title",
innerHTML: "Sections"
});
//Create box body
var boxBody = createElem2({
appendTo: navigationBox,
type: "div",
class: "box-body no-padding"
});
//Display the list of sections
var elemList = createElem2({
appendTo: boxBody,
type: "ul",
class: "nav nav-pills nav-stacked"
});
//General account information
var sectionGeneral = createElem2({
appendTo: elemList,
type: "li",
});
var sectionGeneralLink = createElem2({
appendTo: sectionGeneral,
type: "a",
innerHTML: "<i class='fa fa-user'></i> General"
});
}
}

View File

@ -41,6 +41,15 @@ ComunicWeb.pagesList = {
disableMenus: false disableMenus: false
}, },
/**
* User settings page
*/
settings: {
pageTitle: "Settings",
methodHandler: "ComunicWeb.pages.settings.main.open",
disableMenus: false
},
/** /**
* Login page * Login page
*/ */

View File

@ -167,6 +167,9 @@ class Dev {
//Latest post page stylesheet //Latest post page stylesheet
"css/pages/latestPosts/main.css", "css/pages/latestPosts/main.css",
//User account page
"css/pages/settings/main.css",
//Create account page //Create account page
"css/pages/createAccount.css", "css/pages/createAccount.css",
); );
@ -315,6 +318,10 @@ class Dev {
//Latest posts page //Latest posts page
"js/pages/latestPosts/main.js", "js/pages/latestPosts/main.js",
//User settings page
"js/pages/settings/main.js",
"js/pages/settings/navigationPane.js",
//Login page //Login page
"js/pages/login.js", "js/pages/login.js",