* Updated options page styling
authorVlad Chernushevich <mailbox@happytodesign.com>
Fri, 14 Jun 2013 17:37:36 +0000 (19:37 +0200)
committerVlad Chernushevich <mailbox@happytodesign.com>
Fri, 14 Jun 2013 17:37:36 +0000 (19:37 +0200)
* Refined options handling

client/assets/css/style.css
client/assets/img/themes/basic.jpg [new file with mode: 0644]
client/assets/img/themes/cli.jpg [new file with mode: 0644]
client/assets/img/themes/mini.jpg [new file with mode: 0644]
client/assets/img/themes/relaxed.jpg [new file with mode: 0644]
client/assets/src/applets/settings.js
client/assets/src/index.html.tmpl

index e91c28e6a4bb0e01bd6f29f4a20da41179e499a9..fad8c24065956e09ffccd92cdc8b29ca6340e1bc 100644 (file)
@@ -219,7 +219,8 @@ html, body { height:100%; }
 
 
 /* Settings applet */
-#kiwi .settings{padding:50px}#kiwi .settings article,#kiwi .settings aside,#kiwi .settings details,#kiwi .settings figcaption,#kiwi .settings figure,#kiwi .settings footer,#kiwi .settings header,#kiwi .settings hgroup,#kiwi .settings main,#kiwi .settings nav,#kiwi .settings section,#kiwi .settings summary{display:block}#kiwi .settings audio,#kiwi .settings canvas,#kiwi .settings video{display:inline-block}#kiwi .settings audio:not([controls]){display:none;height:0}#kiwi .settings [hidden]{display:none}#kiwi .settings html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}#kiwi .settings body{margin:0}#kiwi .settings a:focus{outline:thin dotted}#kiwi .settings a:active,#kiwi .settings a:hover{outline:0}#kiwi .settings h1{font-size:2em}#kiwi .settings abbr[title]{border-bottom:1px dotted}#kiwi .settings b,#kiwi .settings strong{font-weight:bold}#kiwi .settings dfn{font-style:italic}#kiwi .settings hr{height:0}#kiwi .settings mark{background:#ff0;color:#000}#kiwi .settings code,#kiwi .settings kbd,#kiwi .settings pre,#kiwi .settings samp{font-family:monospace, serif;font-size:1em}#kiwi .settings pre{white-space:pre-wrap}#kiwi .settings q{quotes:"\201C" "\201D" "\2018" "\2019"}#kiwi .settings small{font-size:85%}#kiwi .settings sub,#kiwi .settings sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}#kiwi .settings sup{top:-0.5em}#kiwi .settings sub{bottom:-0.25em}#kiwi .settings img{border:0;max-width:100%;vertical-align:bottom}#kiwi .settings .map img{max-width:none}#kiwi .settings svg:not(:root){overflow:hidden}#kiwi .settings figure{margin:0}#kiwi .settings fieldset{border:1px solid #c0c0c0;margin:0;padding:0}#kiwi .settings legend{border:0;padding:0}#kiwi .settings button,#kiwi .settings input,#kiwi .settings select,#kiwi .settings textarea{font-family:inherit;font-size:100%;margin:0}#kiwi .settings button,#kiwi .settings input{line-height:normal}#kiwi .settings button,#kiwi .settings select{text-transform:none}#kiwi .settings button,#kiwi .settings html input[type="button"],#kiwi .settings input[type="reset"],#kiwi .settings input[type="submit"]{-webkit-appearance:button;cursor:pointer}#kiwi .settings button[disabled],#kiwi .settings html input[disabled]{cursor:default}#kiwi .settings input[type="checkbox"],#kiwi .settings input[type="radio"]{padding:0}#kiwi .settings input[type="search"]{-webkit-appearance:textfield}#kiwi .settings input[type="search"]::-webkit-search-cancel-button,#kiwi .settings input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}#kiwi .settings button::-moz-focus-inner,#kiwi .settings input::-moz-focus-inner{border:0;padding:0}#kiwi .settings textarea{overflow:auto;vertical-align:top}#kiwi .settings table{border-collapse:collapse;border-spacing:0}#kiwi .settings .clearfix:before,#kiwi .settings .list-inline:before,#kiwi .settings .thumbnails:before,#kiwi .settings .clearfix:after,#kiwi .settings .list-inline:after,#kiwi .settings .thumbnails:after{content:' ';display:table}#kiwi .settings .clearfix:after,#kiwi .settings .list-inline:after,#kiwi .settings .thumbnails:after{clear:both}#kiwi .settings .list-unstyled,#kiwi .settings .list-inline,#kiwi .settings .thumbnails{list-style-type:none;margin:0;padding:0}#kiwi .settings .list-inline>li,#kiwi .settings .thumbnails>li{display:inline-block}#kiwi .settings *,#kiwi .settings *:after,#kiwi .settings *:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#kiwi .settings label{cursor:pointer}#kiwi .settings input,#kiwi .settings select,#kiwi .settings textarea{width:100%}#kiwi .settings input[size],#kiwi .settings select[size],#kiwi .settings textarea[size]{width:auto}#kiwi .settings input[type="file"],#kiwi .settings input[type="image"],#kiwi .settings input[type="submit"],#kiwi .settings input[type="reset"],#kiwi .settings input[type="button"],#kiwi .settings input[type="radio"],#kiwi .settings input[type="checkbox"]{width:auto}#kiwi .settings input[type="radio"],#kiwi .settings input[type="checkbox"]{cursor:pointer}#kiwi .settings .radio label,#kiwi .settings .checkbox label{cursor:pointer}#kiwi .settings .radio input[type="radio"],#kiwi .settings .checkbox input[type="checkbox"]{float:left;margin-left:-20px}#kiwi .settings .thumbnail{float:left}@media screen and (max-width: 768px){#kiwi .settings{padding:25px}}
+#kiwi .settings{padding:50px}#kiwi .settings .clearfix:before,#kiwi .settings .list-inline:before,#kiwi .settings .thumbnails:before,#kiwi .settings .clearfix:after,#kiwi .settings .list-inline:after,#kiwi .settings .thumbnails:after{content:' ';display:table}#kiwi .settings .clearfix:after,#kiwi .settings .list-inline:after,#kiwi .settings .thumbnails:after{clear:both}#kiwi .settings .list-unstyled,#kiwi .settings .list-inline,#kiwi .settings .thumbnails{list-style-type:none;margin:0;padding:0}#kiwi .settings .list-inline>li,#kiwi .settings .thumbnails>li{display:inline-block}#kiwi .settings h1,#kiwi .settings h2,#kiwi .settings h3{margin-top:22px;margin-bottom:11px}#kiwi .settings h4,#kiwi .settings h5,#kiwi .settings h6{margin-top:11px;margin-bottom:11px}#kiwi .settings h1{font-size:46px}#kiwi .settings h2{font-size:40px}#kiwi .settings h3{font-size:34px}#kiwi .settings h4{font-size:28px}#kiwi .settings h5{font-size:22px}#kiwi .settings h6{font-size:16px}#kiwi .settings label{cursor:pointer}#kiwi .settings input,#kiwi .settings select,#kiwi .settings textarea{width:100%}#kiwi .settings input[size],#kiwi .settings select[size],#kiwi .settings textarea[size]{width:auto}#kiwi .settings input[type="file"],#kiwi .settings input[type="image"],#kiwi .settings input[type="submit"],#kiwi .settings input[type="reset"],#kiwi .settings input[type="button"],#kiwi .settings input[type="radio"],#kiwi .settings input[type="checkbox"]{width:auto}#kiwi .settings input[type="radio"],#kiwi .settings input[type="checkbox"]{cursor:pointer;margin-top:2px}#kiwi .settings input[type="checkbox"]{margin-top:3px}#kiwi .settings .radio,#kiwi .settings .checkbox{margin-bottom:10px;padding-left:20px}#kiwi .settings .radio label,#kiwi .settings .checkbox label{cursor:pointer}#kiwi .settings .radio:last-child,#kiwi .settings .checkbox:last-child{margin-bottom:0}#kiwi .settings .radio input[type="radio"],#kiwi .settings .checkbox input[type="checkbox"]{float:left;margin-left:-20px}#kiwi .settings .radio+.radio,#kiwi .settings .checkbox+.checkbox{margin-top:-7px}#kiwi .settings .thumbnail{float:left;margin-right:15px;text-align:center}#kiwi .settings .thumbnail>img,#kiwi .settings .thumbnail>.img{border-radius:3px;padding:3px}#kiwi .settings .thumbnail.active>img,#kiwi .settings .thumbnail.active>.img{background-color:#a6c42c;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #a6c42c),color-stop(100%, #76bd2b));background-image:-webkit-linear-gradient(#a6c42c,#76bd2b);background-image:linear-gradient(#a6c42c,#76bd2b)}#kiwi .settings .input-group{margin:0 0 40px 20px}@media screen and (max-width: 768px){#kiwi .settings{padding:25px}}
+
 
 
 
diff --git a/client/assets/img/themes/basic.jpg b/client/assets/img/themes/basic.jpg
new file mode 100644 (file)
index 0000000..2d2fac0
Binary files /dev/null and b/client/assets/img/themes/basic.jpg differ
diff --git a/client/assets/img/themes/cli.jpg b/client/assets/img/themes/cli.jpg
new file mode 100644 (file)
index 0000000..fea4d21
Binary files /dev/null and b/client/assets/img/themes/cli.jpg differ
diff --git a/client/assets/img/themes/mini.jpg b/client/assets/img/themes/mini.jpg
new file mode 100644 (file)
index 0000000..348b2c7
Binary files /dev/null and b/client/assets/img/themes/mini.jpg differ
diff --git a/client/assets/img/themes/relaxed.jpg b/client/assets/img/themes/relaxed.jpg
new file mode 100644 (file)
index 0000000..2bf4ce5
Binary files /dev/null and b/client/assets/img/themes/relaxed.jpg differ
index ac461a1d442a069d63156b591c89b456bf7608af..f5956eff627b56201861ff0929fb40a47e0f2eba 100644 (file)
 \r
                loadSettings: function () {\r
 \r
-                       var     settings = _kiwi.global.settings,\r
-                               theme = settings.get('theme') || 'relaxed',\r
-                               channel_style = settings.get('channel_list_style') || 'tabs',\r
-                               scrollback = settings.get('scrollback') || '250';\r
-\r
-                       $('[data-setting="theme"][data-value="' + theme + '"]', this.$el).addClass('active');\r
-\r
-                       $('[data-setting="channel_list_style"][value="' + channel_style + '"]', this.$el).prop('checked', true);\r
-\r
-                       if (typeof settings.get('show_joins_parts') === 'undefined' || settings.get('show_joins_parts')) {\r
-                               $('[data-setting="show_joins_parts"]', this.$el).prop('checked', true);\r
-                       } else {\r
-                               $('[data-setting="show_joins_parts"]', this.$el).prop('checked', false);\r
-                       }\r
-\r
-                       if (typeof settings.get('show_timestamps') === 'undefined' || settings.get('show_timestamps')) {\r
-                               $('[data-setting="show_timestamps"]', this.$el).prop('checked', true);\r
-                       } else {\r
-                               $('[data-setting="show_timestamps"]', this.$el).prop('checked', false);\r
-                       }\r
-\r
-                       if (typeof settings.get('mute_sounds') === 'undefined' || settings.get('mute_sounds')) {\r
-                               $('[data-setting="mute_sounds"]', this.$el).prop('checked', true);\r
-                       } else {\r
-                               $('[data-setting="mute_sounds"]', this.$el).prop('checked', false);\r
-                       }\r
-\r
-                       $('[data-setting="scrollback"]', this.$el).val(scrollback);\r
+                       var     that = this;\r
+\r
+                       $.each(_kiwi.global.settings.attributes, function(key, value) {\r
+\r
+                               switch ($('[data-setting="' + key + '"]', that.$el).prop('type')) {\r
+                                       case 'checkbox':\r
+                                               $('[data-setting="' + key + '"]', that.$el).prop('checked', value);\r
+                                               break;\r
+                                       case 'radio':\r
+                                               $('[data-setting="' + key + '"][value="' + value + '"]', that.$el).prop('checked', true);\r
+                                               break;\r
+                                       case 'text':\r
+                                               $('[data-setting="' + key + '"]', that.$el).val(value);\r
+                                               break;\r
+                                       default:\r
+                                               $('[data-setting="' + key + '"][data-value="' + value + '"]', that.$el).addClass('active');\r
+                                               break;\r
+                               }\r
+                       });\r
                },\r
 \r
                saveSettings: function (event) {\r
index c8f9012a5ef955035775f382ce2a646cc13ad3fe..ddab3fbd448f8e94220d08c5f2f62125976314de 100644 (file)
                 <div class="input-group">\r
                     <div class="thumbnails">\r
                         <a class="thumbnail" data-setting="theme" data-value="relaxed" href="#">\r
-                            <img src="http://placehold.it/100x100/fff">\r
+                            <img src="<%base_path%>/assets/img/themes/relaxed.jpg">\r
                             <div class="caption"><u>Relaxed</u></div>\r
                         </a>\r
                         <a class="thumbnail" data-setting="theme" data-value="mini" href="#">\r
-                            <img src="http://placehold.it/100x100/fff">\r
+                            <img src="<%base_path%>/assets/img/themes/mini.jpg">\r
                             <div class="caption"><u>Mini</u></div>\r
                         </a>\r
                         <a class="thumbnail" data-setting="theme" data-value="cli" href="#">\r
-                            <img src="http://placehold.it/100x100/fff">\r
+                            <img src="<%base_path%>/assets/img/themes/cli.jpg">\r
                             <div class="caption"><u>CLI</u></div>\r
                         </a>\r
                         <a class="thumbnail" data-setting="theme" data-value="basic" href="#">\r
-                            <img src="http://placehold.it/100x100/fff">\r
+                            <img src="<%base_path%>/assets/img/themes/basic.jpg">\r
                             <div class="caption"><u>Basic</u></div>\r
                         </a>\r
                     </div>\r
                     <div class="checkbox">\r
                         <label>\r
                             <input data-setting="mute_sounds" type="checkbox">\r
-                            Mute sounds\r
+                            Mute sound notifications\r
                         </label>\r
                     </div>\r
                     <label>\r