From 3d76f6dcdb52d7ddd2a713d9434545d0d2caf765 Mon Sep 17 00:00:00 2001 From: Dany De Bontridder Date: Tue, 25 Aug 2015 02:53:05 +0200 Subject: [PATCH] Task #1153 - Boite de dialogue modale #1153 Dialog box : move smoke.css in each style sheet CSS to customize them --- html/js/acc_ledger.js | 10 ++- html/smoke.css | 118 ---------------------------------- html/style-classic.css | 134 +++++++++++++++++++++++++++++++++++---- html/style-light.css | 123 ++++++++++++++++++++++++++++++++++- html/style-mandarine.css | 134 +++++++++++++++++++++++++++++++++++---- html/style-mobile.css | 134 +++++++++++++++++++++++++++++++++++---- html/style-test.css | 12 ---- 7 files changed, 497 insertions(+), 168 deletions(-) delete mode 100644 html/smoke.css diff --git a/html/js/acc_ledger.js b/html/js/acc_ledger.js index 839f01c40..391224349 100644 --- a/html/js/acc_ledger.js +++ b/html/js/acc_ledger.js @@ -794,8 +794,10 @@ function reverseOperation(obj) return false; } -/*!\brief +/*! + * \brief Show the details of an operation * \param p_value jrn.jr_id + * \param dossier dossier id */ function modifyOperation(p_value, dossier) { @@ -995,6 +997,9 @@ function op_save(obj) queryString += '&div=' + obj.whatdiv.value; queryString += '&act=save'; waiting_box(); + /* + * Operation detail is in a new window + */ if (g('inpopup')) { var action = new Ajax.Request('ajax_ledger.php', @@ -1009,6 +1014,9 @@ function op_save(obj) } else { + /* + *Operation is in a modal box + */ var action = new Ajax.Request('ajax_ledger.php', { method: 'post', diff --git a/html/smoke.css b/html/smoke.css deleted file mode 100644 index 9133d543b..000000000 --- a/html/smoke.css +++ /dev/null @@ -1,118 +0,0 @@ -.smoke-base { - position: fixed; - top: 0px; - left: 0px; - bottom: 0px; - right: 0px; - visibility: hidden; - opacity: 0; - background: rgba(0,0,0,.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000); -} - -.smoke-base.smoke-visible { - opacity: 1; - visibility: visible; -} - -.smokebg { - position: fixed; - top: 0px; - left: 0px; - bottom: 0px; - right: 0px; -} - -.smoke-base .dialog { - position: absolute; - top: 25%; - width: 40%; - left: 50%; - margin-left: -20%; -} - -.dialog-prompt { - margin-top: 15px; - text-align: center; -} - -.dialog-buttons { - margin: 20px 0px 5px 0px -} - -.smoke { - text-align: center; - background-color: #DCE1EF; - font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; - font-family: 'openSansRegular'; - - padding:2px; - margin:0px; - overflow:hidden; - z-index:3; - position:absolute; - left:10%; - border:1px solid #00008B; --moz-box-shadow: 10px 10px 5px #888; --webkit-box-shadow: 10px 10px 5px #888; -box-shadow: 10px 10px 5px #888; -font-size:14.4px; -font-size:0.90rem; -width: 85%; -} -.dialog-buttons button:hover{ - color:beige; - font-weight: bold; -} -.dialog-buttons button { - color:#FFFFFF; - font-weight: normal; - text-decoration:none; - background: #606c88; /* Old browsers */ - background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */ - background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */ - border-color: #605D5D; - border-width:0px; - padding:4px; - margin:3px; - cursor:pointer; - margin:1px 2px 1px 2px; - border-radius: 5px; - moz-border-radius:5px; - width:7em; - width:7rem; -} - -.dialog-prompt input { - margin: 0; - border: 0; - font-family: sans-serif; - outline: none; - font-family: Menlo, 'Andale Mono', monospace; - border: 1px solid #aaa; - width: 75%; - display: inline-block; - background-color: transparent; - font-size: 16px; - padding: 8px; -} - -.smoke-base .dialog-inner { - padding: 15px; - - color:#202020; -} - -button.cancel { - background-color: rgba(0,0,0,.40); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444); -} - -.queue{ - display:none; -} diff --git a/html/style-classic.css b/html/style-classic.css index da131ff78..b4724288a 100644 --- a/html/style-classic.css +++ b/html/style-classic.css @@ -1965,15 +1965,125 @@ td.cut { td.box { border-left: #9999ff solid 1px; } -/*************************************************************************** - * Confirm dialog box - ***************************************************************************/ -div.confirm_box { - position:fixed; - top:100px; - left:0px; - right:0px; - z-index:101; - width:50%; - left:25%; -} \ No newline at end of file + +/**************************************************************************** +* Smoke appearance of modal box + ****************************************************************************/ +.smoke-base { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + visibility: hidden; + opacity: 0; + background: rgba(0,0,0,.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000); +} + +.smoke-base.smoke-visible { + opacity: 1; + visibility: visible; +} + +.smokebg { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; +} + +.smoke-base .dialog { + position: absolute; + top: 25%; + width: 40%; + left: 50%; + margin-left: -20%; +} + +.dialog-prompt { + margin-top: 15px; + text-align: center; +} + +.dialog-buttons { + margin: 20px 0px 5px 0px +} + +.smoke { + text-align: center; + background-color: #DCE1EF; + font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; + font-family: 'openSansRegular'; + + padding:2px; + margin:0px; + overflow:hidden; + z-index:3; + position:absolute; + left:10%; + border:1px solid #00008B; +-moz-box-shadow: 10px 10px 5px #888; +-webkit-box-shadow: 10px 10px 5px #888; +box-shadow: 10px 10px 5px #888; +font-size:14.4px; +font-size:0.90rem; +width: 85%; +} +.dialog-buttons button:hover{ + color:beige; + font-weight: bold; +} +.dialog-buttons button { + color:#FFFFFF; + font-weight: normal; + text-decoration:none; + background: #606c88; /* Old browsers */ + background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */ + background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */ + border-color: #605D5D; + border-width:0px; + padding:4px; + margin:3px; + cursor:pointer; + margin:1px 2px 1px 2px; + border-radius: 5px; + moz-border-radius:5px; + width:7em; + width:7rem; +} + +.dialog-prompt input { + margin: 0; + border: 0; + font-family: sans-serif; + outline: none; + font-family: Menlo, 'Andale Mono', monospace; + border: 1px solid #aaa; + width: 75%; + display: inline-block; + background-color: transparent; + font-size: 16px; + padding: 8px; +} + +.smoke-base .dialog-inner { + padding: 15px; + + color:#202020; +} + +button.cancel { + background-color: rgba(0,0,0,.40); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444); +} + +.queue{ + display:none; +} diff --git a/html/style-light.css b/html/style-light.css index 8e9efac31..008a3a816 100644 --- a/html/style-light.css +++ b/html/style-light.css @@ -1912,4 +1912,125 @@ td.cut { } td.box { border-left : #C76626 solid 1px; -} \ No newline at end of file +} +/**************************************************************************** +* Smoke appearance of modal box + ****************************************************************************/ +.smoke-base { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + visibility: hidden; + opacity: 0; + background: rgba(0,0,0,.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000); +} + +.smoke-base.smoke-visible { + opacity: 1; + visibility: visible; +} + +.smokebg { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; +} + +.smoke-base .dialog { + position: absolute; + top: 25%; + width: 40%; + left: 50%; + margin-left: -20%; +} + +.dialog-prompt { + margin-top: 15px; + text-align: center; +} + +.dialog-buttons { + margin: 20px 0px 5px 0px +} + +.smoke { + text-align: center; + background-color: #DCE1EF; + font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; + font-family: 'openSansRegular'; + + padding:2px; + margin:0px; + overflow:hidden; + z-index:3; + position:absolute; + left:10%; + border:1px solid #00008B; +-moz-box-shadow: 10px 10px 5px #888; +-webkit-box-shadow: 10px 10px 5px #888; +box-shadow: 10px 10px 5px #888; +font-size:14.4px; +font-size:0.90rem; +width: 85%; +} +.dialog-buttons button:hover{ + color:beige; + font-weight: bold; +} +.dialog-buttons button { + color:#FFFFFF; + font-weight: normal; + text-decoration:none; + background: #606c88; /* Old browsers */ + background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */ + background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */ + border-color: #605D5D; + border-width:0px; + padding:4px; + margin:3px; + cursor:pointer; + margin:1px 2px 1px 2px; + border-radius: 5px; + moz-border-radius:5px; + width:7em; + width:7rem; +} + +.dialog-prompt input { + margin: 0; + border: 0; + font-family: sans-serif; + outline: none; + font-family: Menlo, 'Andale Mono', monospace; + border: 1px solid #aaa; + width: 75%; + display: inline-block; + background-color: transparent; + font-size: 16px; + padding: 8px; +} + +.smoke-base .dialog-inner { + padding: 15px; + + color:#202020; +} + +button.cancel { + background-color: rgba(0,0,0,.40); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444); +} + +.queue{ + display:none; +} diff --git a/html/style-mandarine.css b/html/style-mandarine.css index 4fc559032..e52af5293 100644 --- a/html/style-mandarine.css +++ b/html/style-mandarine.css @@ -1883,15 +1883,125 @@ td.cut { td.box { border-left : #C76626 solid 1px; } -/*************************************************************************** - * Confirm dialog box - ***************************************************************************/ -div.confirm_box { - position:fixed; - top:100px; - left:0px; - right:0px; - z-index:101; - width:50%; - left:25%; -} \ No newline at end of file + +/**************************************************************************** +* Smoke appearance of modal box + ****************************************************************************/ +.smoke-base { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + visibility: hidden; + opacity: 0; + background: rgba(0,0,0,.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000); +} + +.smoke-base.smoke-visible { + opacity: 1; + visibility: visible; +} + +.smokebg { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; +} + +.smoke-base .dialog { + position: absolute; + top: 25%; + width: 40%; + left: 50%; + margin-left: -20%; +} + +.dialog-prompt { + margin-top: 15px; + text-align: center; +} + +.dialog-buttons { + margin: 20px 0px 5px 0px +} + +.smoke { + text-align: center; + background-color: #DCE1EF; + font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; + font-family: 'openSansRegular'; + + padding:2px; + margin:0px; + overflow:hidden; + z-index:3; + position:absolute; + left:10%; + border:1px solid #00008B; +-moz-box-shadow: 10px 10px 5px #888; +-webkit-box-shadow: 10px 10px 5px #888; +box-shadow: 10px 10px 5px #888; +font-size:14.4px; +font-size:0.90rem; +width: 85%; +} +.dialog-buttons button:hover{ + color:beige; + font-weight: bold; +} +.dialog-buttons button { + color:#FFFFFF; + font-weight: normal; + text-decoration:none; + background: #606c88; /* Old browsers */ + background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */ + background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */ + border-color: #605D5D; + border-width:0px; + padding:4px; + margin:3px; + cursor:pointer; + margin:1px 2px 1px 2px; + border-radius: 5px; + moz-border-radius:5px; + width:7em; + width:7rem; +} + +.dialog-prompt input { + margin: 0; + border: 0; + font-family: sans-serif; + outline: none; + font-family: Menlo, 'Andale Mono', monospace; + border: 1px solid #aaa; + width: 75%; + display: inline-block; + background-color: transparent; + font-size: 16px; + padding: 8px; +} + +.smoke-base .dialog-inner { + padding: 15px; + + color:#202020; +} + +button.cancel { + background-color: rgba(0,0,0,.40); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444); +} + +.queue{ + display:none; +} diff --git a/html/style-mobile.css b/html/style-mobile.css index e093ac667..8e849b80e 100644 --- a/html/style-mobile.css +++ b/html/style-mobile.css @@ -1947,15 +1947,125 @@ td.cut { td.box { border-left : #3f4c6b solid 1px; } -/*************************************************************************** - * Confirm dialog box - ***************************************************************************/ -div.confirm_box { - position:fixed; - top:100px; - left:0px; - right:0px; - z-index:101; - width:50%; - left:25%; -} \ No newline at end of file + +/**************************************************************************** +* Smoke appearance of modal box + ****************************************************************************/ +.smoke-base { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + visibility: hidden; + opacity: 0; + background: rgba(0,0,0,.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000); +} + +.smoke-base.smoke-visible { + opacity: 1; + visibility: visible; +} + +.smokebg { + position: fixed; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; +} + +.smoke-base .dialog { + position: absolute; + top: 25%; + width: 40%; + left: 50%; + margin-left: -20%; +} + +.dialog-prompt { + margin-top: 15px; + text-align: center; +} + +.dialog-buttons { + margin: 20px 0px 5px 0px +} + +.smoke { + text-align: center; + background-color: #DCE1EF; + font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; + font-family: 'openSansRegular'; + + padding:2px; + margin:0px; + overflow:hidden; + z-index:3; + position:absolute; + left:10%; + border:1px solid #00008B; +-moz-box-shadow: 10px 10px 5px #888; +-webkit-box-shadow: 10px 10px 5px #888; +box-shadow: 10px 10px 5px #888; +font-size:14.4px; +font-size:0.90rem; +width: 85%; +} +.dialog-buttons button:hover{ + color:beige; + font-weight: bold; +} +.dialog-buttons button { + color:#FFFFFF; + font-weight: normal; + text-decoration:none; + background: #606c88; /* Old browsers */ + background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */ + background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */ + border-color: #605D5D; + border-width:0px; + padding:4px; + margin:3px; + cursor:pointer; + margin:1px 2px 1px 2px; + border-radius: 5px; + moz-border-radius:5px; + width:7em; + width:7rem; +} + +.dialog-prompt input { + margin: 0; + border: 0; + font-family: sans-serif; + outline: none; + font-family: Menlo, 'Andale Mono', monospace; + border: 1px solid #aaa; + width: 75%; + display: inline-block; + background-color: transparent; + font-size: 16px; + padding: 8px; +} + +.smoke-base .dialog-inner { + padding: 15px; + + color:#202020; +} + +button.cancel { + background-color: rgba(0,0,0,.40); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444); +} + +.queue{ + display:none; +} diff --git a/html/style-test.css b/html/style-test.css index 5bccfbce8..478a8ec33 100644 --- a/html/style-test.css +++ b/html/style-test.css @@ -72,15 +72,3 @@ table.sortable td,table.result td top:0; left:0; } -/*************************************************************************** - * Confirm dialog box - ***************************************************************************/ -div.confirm_box { - position:fixed; - top:100px; - left:0px; - right:0px; - z-index:101; - width:50%; - left:25%; -} \ No newline at end of file