From c17cc2322a66ff27b44ef4b2baefecf5f0ecd755 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 2 Feb 2016 14:03:22 +0100 Subject: [PATCH] Update TODO + debut CSS submenu et correction menu (nowrap :after) --- css/header.css | 2 +- css/header.scss | 5 +++++ css/layout.css | 2 +- css/layout.scss | 1 + js/action-script.js | 7 ++++++- js/lib/page-manager.js | 10 ++++++++-- src/static/loader.svg | 1 + src/static/loader2.svg | 1 + todo.md | 5 +++-- view.php | 10 +++++----- view/dashboard.php | 14 +++++++------- view/machines.php | 12 ++++++++++++ view/settings.php | 12 ++++++++++++ view/sync.php | 12 ++++++++++++ view/users.php | 12 ++++++++++++ 15 files changed, 87 insertions(+), 19 deletions(-) create mode 100644 src/static/loader.svg create mode 100644 src/static/loader2.svg create mode 100644 view/machines.php create mode 100644 view/settings.php create mode 100644 view/sync.php create mode 100644 view/users.php diff --git a/css/header.css b/css/header.css index f4bc6b7..aee88bc 100755 --- a/css/header.css +++ b/css/header.css @@ -1,2 +1,2 @@ - +#WRAPPER>#HEADER.loading>.icon{background-image:url("../src/static/loader2.svg");background-size:70% 70%} /*# sourceMappingURL=header.css.map */ diff --git a/css/header.scss b/css/header.scss index e69de29..ef9c8bd 100755 --- a/css/header.scss +++ b/css/header.scss @@ -0,0 +1,5 @@ +/* Animation de chargement qudnd chargement ajax */ +#WRAPPER > #HEADER.loading > .icon{ + background-image: url('../src/static/loader2.svg'); + background-size: 70% 70%; +} diff --git a/css/layout.css b/css/layout.css index 52c997f..bddf5c3 100755 --- a/css/layout.css +++ b/css/layout.css @@ -1,2 +1,2 @@ -#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #2277f7;background-color:#5395f9;z-index:10}#WRAPPER>#HEADER>.icon{display:block;position:absolute;top:0;left:0;width:4em;height:4em;background-color:#2277f7;background-image:url("../src/static/icon.svg");background-position:center center;background-repeat:no-repeat;background-size:50% 50%;cursor:pointer;transition:all .3s}#WRAPPER>#HEADER>.icon:hover{background-color:#0967f6}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#444 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover{border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link].active{border-color:#e6e6e6}#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover{color:#565656}#WRAPPER>#CONTAINER{display:block;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em );height:calc( 100% - 4em - 2*1em );padding:1em;overflow-x:none;overflow-y:auto} +#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #2277f7;background-color:#5395f9;z-index:10}#WRAPPER>#HEADER>.icon{display:block;position:absolute;top:0;left:0;width:4em;height:4em;background-color:#2277f7;background-image:url("../src/static/icon.svg");background-position:center center;background-repeat:no-repeat;background-size:50% 50%;cursor:pointer;transition:all .3s}#WRAPPER>#HEADER>.icon:hover{background-color:#0967f6}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#444 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover{border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link].active{border-color:#e6e6e6}#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover{color:#565656}#WRAPPER>#CONTAINER{display:block;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em );height:calc( 100% - 4em - 2*1em );padding:1em;overflow-x:none;overflow-y:auto} /*# sourceMappingURL=layout.css.map */ diff --git a/css/layout.scss b/css/layout.scss index 5dd4849..46858d4 100755 --- a/css/layout.scss +++ b/css/layout.scss @@ -124,6 +124,7 @@ $theme-color: #5395f9; background-color: #2a2a2a; color: #e2e2e2; + white-space: nowrap; transition: transform .1s; diff --git a/js/action-script.js b/js/action-script.js index 805d1e0..f48d709 100755 --- a/js/action-script.js +++ b/js/action-script.js @@ -53,9 +53,14 @@ function navMenu(section){ var page = null; // On charge la page si data-link trouve - if( target.getData('link') ) + if( target.getData('link') ){ + DOM.HEADER.addClass('loading'); // Animation de chargement + pageManager.setPage( target.getData('link') ); + pageManager.xhr[pageManager.xhr.length-1].onloadend = function(){ DOM.HEADER.remClass('loading'); } + } + }navMenu(pageManager.page); diff --git a/js/lib/page-manager.js b/js/lib/page-manager.js index 9f68f73..2c1e21d 100644 --- a/js/lib/page-manager.js +++ b/js/lib/page-manager.js @@ -21,8 +21,8 @@ pageManagerClass.prototype = { page: null, // l'indice de la page courante dans pagelist vars: [], // les variables suivant le nom de la page dans l'URL path: '', // le chemin du dossier contenant les pages (.php) - jsPath: '_JS_', // le chemin du dossier contenant les scripts (.js) - cssPath: '_CSS_', // le chemin du dossier contenant les feuilles de style (.css) + jsPath: 'js', // le chemin du dossier contenant les scripts (.js) + cssPath: 'css', // le chemin du dossier contenant les feuilles de style (.css) pagelist: null, // la liste des pages pouvant être chargées container: null, // élément DOM qui contiendra le contenu des pages à charger /* ======================================================================= @@ -64,6 +64,8 @@ pageManagerClass.prototype = { this.xhr[index].open( method, pLink, true ); this.xhr[index].send( form ); + + return this; }, /***************************************************** [APPLICATION] Ajax() ******************************************************/ // EXEMPLES DE FONCTIONS POUR pHandler // @@ -253,6 +255,8 @@ pageManagerClass.prototype = { } }else console.warn('pagelist et container manquant'); + + return this; }, @@ -264,6 +268,8 @@ pageManagerClass.prototype = { */ reload: function(){ this.setPage(this.page); + + return this; } } \ No newline at end of file diff --git a/src/static/loader.svg b/src/static/loader.svg new file mode 100644 index 0000000..71c0a24 --- /dev/null +++ b/src/static/loader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/loader2.svg b/src/static/loader2.svg new file mode 100644 index 0000000..1b36c21 --- /dev/null +++ b/src/static/loader2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/todo.md b/todo.md index bf5a748..0db43d4 100644 --- a/todo.md +++ b/todo.md @@ -10,8 +10,8 @@ # EN COURS # ############ - [.] Design de structure (layout) - - [.] Header - - [.] Menu-side + - [x] Header + - [x] Menu-side - [.] Submenu-side - [.] Gestion JS de la navigation - [x] Gestion de liens+URL du menu @@ -21,6 +21,7 @@ # FAIT # ######## - [x] Gestion complete de la navigation de niveau 0 + - [x] Ajout d'un loader pour page-manager.js - [x] Autoloader avec namespace - [x] Adaptation de page-manger.js - [x] Conception et dev routeur diff --git a/view.php b/view.php index 6dd6e39..b251a92 100755 --- a/view.php +++ b/view.php @@ -41,11 +41,11 @@ diff --git a/view/dashboard.php b/view/dashboard.php index 7603066..4e2a8f8 100644 --- a/view/dashboard.php +++ b/view/dashboard.php @@ -1,12 +1,12 @@ -blabla \ No newline at end of file +Bienvenue sur le DASHBOARD \ No newline at end of file diff --git a/view/machines.php b/view/machines.php new file mode 100644 index 0000000..2ee22b5 --- /dev/null +++ b/view/machines.php @@ -0,0 +1,12 @@ + + + + +Bienvenue sur la page de gestion des MACHINES \ No newline at end of file diff --git a/view/settings.php b/view/settings.php new file mode 100644 index 0000000..df3e067 --- /dev/null +++ b/view/settings.php @@ -0,0 +1,12 @@ + + + + +Bienvenue sur la page des PARAMETRES \ No newline at end of file diff --git a/view/sync.php b/view/sync.php new file mode 100644 index 0000000..f8159f1 --- /dev/null +++ b/view/sync.php @@ -0,0 +1,12 @@ + + + + +Bienvenue sur la page de SYNCHRONISATION \ No newline at end of file diff --git a/view/users.php b/view/users.php new file mode 100644 index 0000000..73ce4f3 --- /dev/null +++ b/view/users.php @@ -0,0 +1,12 @@ + + + + +Bienvenue sur la page de gestion des UTILISATEURS \ No newline at end of file