[checkmk-commits] Check_MK Git: check_mk: Added image designed submit button (

only for login dialog at the moment) User-Agent: Heirloom mailx 12.4 7/29/08 MIME-Version: 1.0 Content-Type: text/plain; charset=us-ascii Content-Transfer-Encoding: 7bit Module: check_mk Branch: master Commit: cf29c776d71e151a58bc888c96315fece2096409 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=cf29c776d71e15… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Mon Feb 20 16:52:25 2012 +0100 Added image designed submit button (only for login dialog at the moment) --- web/htdocs/check_mk.css | 45 +++++++++++++++++++++++++++++++--- web/htdocs/htmllib.py | 5 ++++ web/htdocs/images/image_button_l.png | Bin 0 -> 2233 bytes web/htdocs/images/image_button_r.png | Bin 0 -> 2801 bytes web/htdocs/login.css | 14 +++++++---- web/htdocs/login.py | 18 +++++++------- 6 files changed, 64 insertions(+), 18 deletions(-) diff --git a/web/htdocs/check_mk.css b/web/htdocs/check_mk.css index a4a04a7..bd90b1b 100644 --- a/web/htdocs/check_mk.css +++ b/web/htdocs/check_mk.css @@ -73,10 +73,6 @@ input, select, textarea { background-color: #fff; } -input:hover, select:hover, textarea:hover { - background-color: #EDECEB; -} - /* Select element with icons */ select.icon option { background-repeat: no-repeat; @@ -108,6 +104,47 @@ a.button { margin: 2px; } +/* Image submit button styling */ +label.image_button { + display: block; + margin: 0 auto; + background: transparent url('images/image_button_l.png') no-repeat; + background-position: 0 -30px; + padding: 0 0 0 14px; + height: 30px; +} +label.image_button:hover { + background-position: 0 -60px; +} +label.image_button:active { + background-position: 0 -90px; +} +label.image_button input { + height: 30px; + color: #fff; + border: none; + padding-right: 16px; + background: transparent url('images/image_button_r.png') no-repeat; + background-position: right -30px; +} +label.image_button input:hover { + background-position: right -60px; +} +label.image_button input:active { + background-position: right -90px; +} +label.image_button input[type="submit"]::-moz-focus-inner { + border: 0px; +} +/*for IE8 */ +input[type="submit"]:focus { + outline: none; +} + +input:hover, select:hover, textarea:hover { + background-color: #EDECEB; +} + /* Images have a native size of 48x48 and are scaled down by the browser. That way if you select a zoom level in the browser, the quality of the images are better */ diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py index f37ca06..676b641 100644 --- a/web/htdocs/htmllib.py +++ b/web/htdocs/htmllib.py @@ -303,6 +303,11 @@ class html: def makeuri_contextless(self, vars): return self.req.myfile + ".py?" + urlencode_vars(vars) + def image_button(self, varname, title, cssclass = ''): + self.write('<label for="%s" class=image_button>' % varname) + self.button(varname, title, cssclass) + self.write('</label>') + def button(self, varname, title, cssclass=""): self.write("<input type=submit name=\"%s\" id=\"%s\" value=\"%s\" class=\"%s\">\n" % \ ( varname, varname, title, cssclass)) diff --git a/web/htdocs/images/image_button_l.png b/web/htdocs/images/image_button_l.png new file mode 100644 index 0000000..340936e Binary files /dev/null and b/web/htdocs/images/image_button_l.png differ diff --git a/web/htdocs/images/image_button_r.png b/web/htdocs/images/image_button_r.png new file mode 100644 index 0000000..cd374b0 Binary files /dev/null and b/web/htdocs/images/image_button_r.png differ diff --git a/web/htdocs/login.css b/web/htdocs/login.css index f8f9c20..287e44a 100644 --- a/web/htdocs/login.css +++ b/web/htdocs/login.css @@ -123,8 +123,8 @@ label { #button_text { position: absolute; - top: 355px; - left: 505px; + top: 350px; + left: 500px; text-align: center; width: 61px; color: white; @@ -135,12 +135,16 @@ label { #login_error { position: absolute; - top: -60px; - left: 135px; - width: 360px; + top: 350px; + left: 264px; + width: 205px; z-index: 100; } +#login_error div.error { + margin:0; + padding:6px 0; +} #foot { position: absolute; diff --git a/web/htdocs/login.py b/web/htdocs/login.py index 1e2afab..c2acaa6 100644 --- a/web/htdocs/login.py +++ b/web/htdocs/login.py @@ -220,11 +220,6 @@ def normal_login_page(): origtarget = html.req.uri html.write("<div id=login>") - if html.has_user_errors(): - html.write('<div id=login_error>') - html.show_user_errors() - html.write('</div>') - html.write("<img id=login_window src=\"images/login_window.png\">") html.write("<div id=version>%s</div>" % defaults.check_mk_version) @@ -235,11 +230,16 @@ def normal_login_page(): html.text_input("_username", size = 50, id="input_user") html.write("<label id=label_pass class=legend for=_password>%s:</label><br />" % _('Password')) html.password_input("_password", size = 50, id="input_pass") - html.write("<div id=button_text>%s</div>" % _("Login")) - html.icon_button("javascript:document.getElementById('form_login').submit();", _("Login"), "login", id="button_login") - html.write('<input type=submit style="display: none;">') - # Footer with copyright and stuff + if html.has_user_errors(): + html.write('<div id=login_error>') + html.show_user_errors() + html.write('</div>') + + html.write("<div id=button_text>") + html.image_button("_login", _('Login')) + html.write("</div>") + html.write("<div id=foot>Version: %s - &copy; " "<a href=\"http://mathias-kettner.de\">Mathias Kettner</a><br><br>" % defaults.check_mk_version) html.write(_("You can use, modify and distribute Check_MK under the terms of the <a href='%s'>"