/* Settings applet */
-#kiwi .settings {
- width:900px;
- margin:1em auto;
-}
-#kiwi .settings table td {
- padding:0.5em 1em;
-}
-#kiwi .settings .save .feedback {
- display: none;
- position: relative;
- left: -1.6em;
-}
+#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}}
(function () {\r
- var View = Backbone.View.extend({\r
- events: {\r
- 'click .save': 'saveSettings'\r
- },\r
-\r
- initialize: function (options) {\r
- this.$el = $($('#tmpl_applet_settings').html().trim());\r
-\r
- // Incase any settings change while we have this open, update them\r
- _kiwi.global.settings.on('change', this.loadSettings, this);\r
-\r
- // Now actually show the current settings\r
- this.loadSettings();\r
-\r
-\r
- },\r
-\r
- loadSettings: function () {\r
- var settings = _kiwi.global.settings;\r
-\r
- // TODO: Tidy this up\r
- var theme = settings.get('theme') || 'relaxed';\r
- this.$el.find('.setting-theme option').filter(function() {\r
- return $(this).val() === theme;\r
- }).prop('selected', true);\r
-\r
- var list_style = settings.get('channel_list_style') || 'tabs';\r
- this.$el.find('.setting-channel_list_style option').filter(function() {\r
- return $(this).val() === list_style;\r
- }).prop('selected', true);\r
-\r
- this.$el.find('.setting-scrollback').val(settings.get('scrollback') || '250');\r
-\r
- if (typeof settings.get('show_joins_parts') === 'undefined' || settings.get('show_joins_parts')) {\r
- this.$el.find('.setting-show_joins_parts').prop('checked', true);\r
- } else {\r
- this.$el.find('.setting-show_joins_parts').prop('checked', false);\r
- }\r
-\r
- if (typeof settings.get('show_timestamps') === 'undefined' || !settings.get('show_timestamps')) {\r
- this.$el.find('.setting-show_timestamps').prop('checked', false);\r
- } else {\r
- this.$el.find('.setting-show_timestamps').prop('checked', true);\r
- }\r
-\r
- if (typeof settings.get('mute_sounds') === 'undefined' || settings.get('mute_sounds')) {\r
- this.$el.find('.setting-mute_sounds').prop('checked', true);\r
- } else {\r
- this.$el.find('.setting-mute_sounds').prop('checked', false);\r
- }\r
- },\r
-\r
-\r
- saveSettings: function () {\r
- var settings = _kiwi.global.settings,\r
- feedback;\r
-\r
- // Stop settings being updated while we're saving one by one\r
- settings.off('change', this.loadSettings, this);\r
-\r
- settings.set('theme', $('.setting-theme', this.$el).val());\r
- settings.set('channel_list_style', $('.setting-channel_list_style', this.$el).val());\r
- settings.set('scrollback', $('.setting-scrollback', this.$el).val());\r
- settings.set('show_joins_parts', $('.setting-show_joins_parts', this.$el).is(':checked'));\r
- settings.set('show_timestamps', $('.setting-show_timestamps', this.$el).is(':checked'));\r
- settings.set('mute_sounds', $('.setting-mute_sounds', this.$el).is(':checked'));\r
-\r
- settings.save();\r
-\r
- feedback = $('.feedback', this.$el);\r
- feedback.fadeIn('slow', function () {\r
- feedback.fadeOut('slow');\r
- });\r
-\r
- // Continue listening for setting changes\r
- settings.on('change', this.loadSettings, this);\r
- }\r
- });\r
-\r
-\r
-\r
- var Applet = Backbone.Model.extend({\r
- initialize: function () {\r
- this.set('title', 'Settings');\r
- this.view = new View();\r
- }\r
- });\r
-\r
-\r
- _kiwi.model.Applet.register('kiwi_settings', Applet);\r
+ var View = Backbone.View.extend({\r
+ events: {\r
+ 'change [data-setting]': 'saveSettings',\r
+ 'click [data-setting="theme"]': 'selectTheme'\r
+ },\r
+\r
+ initialize: function (options) {\r
+ this.$el = $($('#tmpl_applet_settings').html().trim());\r
+\r
+ // Incase any settings change while we have this open, update them\r
+ _kiwi.global.settings.on('change', this.loadSettings, this);\r
+\r
+ // Now actually show the current settings\r
+ this.loadSettings();\r
+\r
+ },\r
+\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
+ },\r
+\r
+ saveSettings: function (event) {\r
+ var value,\r
+ settings = _kiwi.global.settings,\r
+ $setting = $(event.currentTarget, this.$el)\r
+\r
+ switch (event.currentTarget.type) {\r
+ case 'checkbox':\r
+ value = $setting.is(':checked');\r
+ break;\r
+ case 'radio':\r
+ case 'text':\r
+ value = $setting.val();\r
+ break;\r
+ default:\r
+ value = $setting.data('value');\r
+ break;\r
+ }\r
+\r
+ // Stop settings being updated while we're saving one by one\r
+ _kiwi.global.settings.off('change', this.loadSettings, this);\r
+ settings.set($setting.data('setting'), value);\r
+ settings.save();\r
+\r
+ // Continue listening for setting changes\r
+ _kiwi.global.settings.on('change', this.loadSettings, this);\r
+ },\r
+\r
+ selectTheme: function(event) {\r
+ $('[data-setting="theme"].active', this.$el).removeClass('active');\r
+ $(event.currentTarget).addClass('active').trigger('change');\r
+ event.preventDefault();\r
+ }\r
+ });\r
+\r
+\r
+ var Applet = Backbone.Model.extend({\r
+ initialize: function () {\r
+ this.set('title', 'Settings');\r
+ this.view = new View();\r
+ }\r
+ });\r
+\r
+\r
+ _kiwi.model.Applet.register('kiwi_settings', Applet);\r
})();
\ No newline at end of file
\r
<script type="text/html" id="tmpl_applet_settings">\r
<div class="settings">\r
- <table>\r
- <tr>\r
- <td class="label">Theme</td>\r
- <td class="setting">\r
- <select class="setting-theme">\r
- <option value="relaxed">Relaxed</option>\r
- <option value="mini">Mini</option>\r
- <option value="cli">CLI</option>\r
- <option value="basic">Basic</option>\r
- </select>\r
- </td>\r
- </tr>\r
- <tr>\r
- <td class="label">Channel list</td>\r
- <td class="setting">\r
- <select class="setting-channel_list_style">\r
- <option value="list">List</option>\r
- <option value="tabs">Tabs</option>\r
- </select>\r
-\r
- <i style="font-size:0.9em;">Lots of channels? `List` may be more suited</i>\r
- </td>\r
- </tr>\r
- <tr>\r
- <td class="label">Scrollback</td>\r
- <td class="setting"><input type="text" class="setting-scrollback" value="150" /></td>\r
- </tr>\r
-\r
- <tr>\r
- <td class="label">Show joins/parts</td>\r
- <td class="setting"><input type="checkbox" class="setting-show_joins_parts" /></td>\r
- </tr>\r
-\r
- <tr>\r
- <td class="label">Show timestamps</td>\r
- <td class="setting"><input type="checkbox" class="setting-show_timestamps" /></td>\r
- </tr>\r
- \r
- <tr>\r
- <td class="label">Mute sounds</td>\r
- <td class="setting"><input type="checkbox" class="setting-mute_sounds" /></td>\r
- </tr>\r
-\r
- <tr class="save">\r
- <td colspan="2"><button class="save">Save</button><br/><span class="feedback">Saved!</span></td>\r
- </tr>\r
- </table>\r
+ <section>\r
+ <h6>Theme</h6>\r
+ <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
+ <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
+ <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
+ <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
+ <div class="caption"><u>Basic</u></div>\r
+ </a>\r
+ </div>\r
+ </div>\r
+ </section>\r
+\r
+ <section>\r
+ <h6>Channels</h6>\r
+ <div class="input-group">\r
+ <div class="radio">\r
+ <label>\r
+ <input type="radio" name="channel_list_style" data-setting="channel_list_style" value="tabs">\r
+ Tabs\r
+ </label>\r
+ </div>\r
+ <div class="radio">\r
+ <label>\r
+ <input type="radio" name="channel_list_style" data-setting="channel_list_style" value="list">\r
+ List <small class="text-muted">(for large amouts of channels)</small>\r
+ </label>\r
+ </div>\r
+ </div>\r
+ </section>\r
+\r
+ <section>\r
+ <h6>Chat window</h6>\r
+ <div class="input-group">\r
+ <div class="checkbox">\r
+ <label>\r
+ <input data-setting="show_joins_parts" type="checkbox">\r
+ Join/part channel notifications\r
+ </label>\r
+ </div>\r
+ <div class="checkbox">\r
+ <label>\r
+ <input data-setting="show_timestamps" type="checkbox">\r
+ Timestamps\r
+ </label>\r
+ </div>\r
+ <div class="checkbox">\r
+ <label>\r
+ <input data-setting="mute_sounds" type="checkbox">\r
+ Mute sounds\r
+ </label>\r
+ </div>\r
+ <label>\r
+ <input data-setting="scrollback" class="input-small" type="text" size="4" pattern="\d*">\r
+ <span>messages in scroll history</span>\r
+ </label>\r
+ </div>\r
+ </section>\r
</div>\r
</script>\r
\r
projects / KiwiIRC.git / commitdiff