diff --git a/client/assets/themes/basic/style.css b/client/assets/themes/basic/style.css index ffeb5d8a5..c4dadbab3 100644 --- a/client/assets/themes/basic/style.css +++ b/client/assets/themes/basic/style.css @@ -368,21 +368,39 @@ #kiwi.chanlist_treeview .panels { left:160px; } -#kiwi.chanlist_treeview .toolbar { position:static; } -#kiwi.chanlist_treeview .toolbar .app_tools { float:none; } -#kiwi.chanlist_treeview .toolbar > div { margin-left:160px; } -#kiwi.chanlist_treeview .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#1B1B1B; overflow-y:auto; } +#kiwi.chanlist_treeview .toolbar, #kiwi.narrow .toolbar { position:static; } +#kiwi.chanlist_treeview .toolbar .app_tools, #kiwi.narrow .toolbar .app_tools { float:none; } +#kiwi.chanlist_treeview .toolbar > div { margin-left:0; } +#kiwi.chanlist_treeview .toolbar .tabs, #kiwi.narrow .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#1B1B1B; overflow-y:auto; } #kiwi.chanlist_treeview .toolbar .panellist { float: none; display: block; margin-right: 5px; } -#kiwi.chanlist_treeview .tabs ul li { display:block; float:none; } +#kiwi.chanlist_treeview .tabs ul li, #kiwi.narrow .tabs ul li { display:block; float:none; } #kiwi.chanlist_treeview .tabs ul li .activity { float:right; } -#kiwi.chanlist_treeview .toolbar .panellist li { - padding: 4px 8px; -} +#kiwi.chanlist_treeview .toolbar .panellist li { padding: 4px 8px; } #kiwi.chanlist_treeview .toolbar .panellist .active { padding-left: 6px; padding-right:23px; border:none; border-left:2px solid #df6b26; border-bottom:none; } -#kiwi.chanlist_treeview .tabs ul li.active { - margin-right:0; - border-right-width:0; -} +#kiwi.chanlist_treeview .tabs ul li.active { margin-right:0; border-right-width:0; } +#kiwi.chanlist_treeview .toolbar .topic { margin-left: 160px;} + +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar .main .tabs_menu { -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -webkit-transition-duration:0.3s; transition-duration:0.3s; } +#kiwi.narrow.with_sidebar .panels, #kiwi.narrow.with_sidebar .controlbox { -moz-transform:translateX(160px); -ms-transform:translateX(160px); -webkit-transform:translateX(160px); transform:translateX(160px); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow.with_sidebar .toolbar .tabs { -moz-transform:translateX(0); -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox { left: 0; } +#kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar_overlay { top: 36px; } +#kiwi.narrow .toolbar .tabs { -moz-transform:translateX(-160px); -ms-transform:translateX(-160px); -webkit-transform:translateX(-160px); transform:translateX(-160px); z-index: 4; } +#kiwi.narrow.with_sidebar .toolbar .tabs { height: 100% } +#kiwi .toolbar_overlay, #kiwi.narrow .toolbar .topic, #kiwi .toolbar .app_tools ul li.tabs_menu { display: none; } +#kiwi.narrow .toolbar_overlay { position: absolute; left: 0; height: 100%; width: 100%; z-index: 3; background-color: rgba(0,0,0,0.5); } +#kiwi.narrow.with_sidebar .toolbar_overlay { display: block; } +#kiwi.narrow.with_sidebar .controlbox { border-top: none; } +#kiwi.narrow.with_sidebar .panels { bottom: 0; } +#kiwi.narrow .toolbar .main { text-align: right; } +#kiwi.narrow .toolbar .main .tabs_menu { position: absolute; left: 0; margin-top: 10px; margin-left: 10px !important; } +#kiwi.narrow.with_sidebar .toolbar .main .tabs_menu { margin-left: 0 !important; } +#kiwi.narrow .tabs_activity {display:none; position: absolute; width: 7px; height: 7px; background-color: #8ab746; z-index: 3; top: 0px; right: -3px; border-radius: 3px; box-shadow: 0px 0px 5px 2px #8ab746;} +#kiwi .tabs_activity {display:none;} +#kiwi.narrow .tabs ul li .activity { float:right; } +#kiwi.narrow .tabs ul li.active { padding-left:1em; } +#kiwi.narrow .toolbar .app_tools ul li.tabs_menu { display: inline; } + #kiwi .applet_chanlist { margin: 0.5em 1em; } diff --git a/client/assets/themes/cli/style.css b/client/assets/themes/cli/style.css index c17aab394..bb4dfd300 100644 --- a/client/assets/themes/cli/style.css +++ b/client/assets/themes/cli/style.css @@ -333,15 +333,38 @@ #kiwi.chanlist_treeview .panels { left:160px; } -#kiwi.chanlist_treeview .toolbar { position:static; } -#kiwi.chanlist_treeview .toolbar .app_tools { float:none; } +#kiwi.chanlist_treeview .toolbar, #kiwi.narrow .toolbar { position:static; } +#kiwi.chanlist_treeview .toolbar .app_tools, #kiwi.narrow .toolbar .app_tools { float:none; } #kiwi.chanlist_treeview .toolbar > div { margin-left:0px; } -#kiwi.chanlist_treeview .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#252525; overflow-y:auto; } -#kiwi.chanlist_treeview .tabs ul li { display:block; float:none; } +#kiwi.chanlist_treeview .toolbar .tabs, #kiwi.narrow .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#252525; overflow-y:auto; } +#kiwi.chanlist_treeview .tabs ul li, #kiwi.narrow .tabs ul li { display:block; float:none; } #kiwi.chanlist_treeview .tabs ul li .activity { float:right; } #kiwi.chanlist_treeview .tabs ul li.active { padding-top:4px; } #kiwi.chanlist_treeview .panellist { margin-top: 5px; } #kiwi.chanlist_treeview .panellist li { margin: 0 2px; border-bottom: none; } +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar .main .tabs_menu { -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -webkit-transition-duration:0.3s; transition-duration:0.3s; } +#kiwi.narrow.with_sidebar .panels, #kiwi.narrow.with_sidebar .controlbox { -moz-transform:translateX(160px); -ms-transform:translateX(160px); -webkit-transform:translateX(160px); transform:translateX(160px); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow.with_sidebar .toolbar .tabs { -moz-transform:translateX(0); -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox { left: 0; } +#kiwi.narrow.with_sidebar .toolbar .connections .connection { width: 100%; } +#kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar_overlay { top: 39px; } +#kiwi.narrow .toolbar .tabs { -moz-transform:translateX(-160px); -ms-transform:translateX(-160px); -webkit-transform:translateX(-160px); transform:translateX(-160px); z-index: 4; } +#kiwi.narrow.with_sidebar .toolbar .tabs { height: 100% } +#kiwi .toolbar_overlay, #kiwi.narrow .toolbar .topic, #kiwi .toolbar .app_tools ul li.tabs_menu { display: none; } +#kiwi.narrow .toolbar_overlay { position: absolute; left:0; height: 100%; width: 100%; z-index: 3; background-color: rgba(0,0,0,0.5); } +#kiwi.narrow.with_sidebar .toolbar_overlay { display: block; } +#kiwi.narrow.with_sidebar .controlbox { border-top: none; } +#kiwi.narrow.with_sidebar .panels { bottom: 0; } +#kiwi.narrow .toolbar .main { text-align: right; } +#kiwi.narrow .toolbar .main .tabs_menu { position: absolute; left: 0; margin-top: 10px; margin-left: 10px !important; } +#kiwi.narrow.with_sidebar .toolbar .main .tabs_menu { margin-left: 0 !important; } +#kiwi.narrow .tabs_activity {display:none; position: absolute; width: 7px; height: 7px; background-color: #8ab746; z-index: 3; top: 0px; right: -3px; border-radius: 3px; box-shadow: 0px 0px 5px 2px #8ab746;} +#kiwi .tabs_activity {display:none;} + +#kiwi.narrow .tabs ul li .activity { float:right; } +#kiwi.narrow .tabs ul li.active { padding-left:1em; } +#kiwi.narrow .toolbar .app_tools ul li.tabs_menu { display: inline; } + #kiwi .applet_chanlist { margin: 0.5em 1em; } diff --git a/client/assets/themes/mini/style.css b/client/assets/themes/mini/style.css index 7a036a9c8..a0d1094ba 100644 --- a/client/assets/themes/mini/style.css +++ b/client/assets/themes/mini/style.css @@ -137,13 +137,35 @@ #kiwi.chanlist_treeview .panels { left:160px; } -#kiwi.chanlist_treeview .toolbar { position:static; } -#kiwi.chanlist_treeview .toolbar .app_tools { float:none; } -#kiwi.chanlist_treeview .toolbar > div { } -#kiwi.chanlist_treeview .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#1B1B1B; overflow-y:auto; } -#kiwi.chanlist_treeview .tabs ul li { display:block; float:none; } +#kiwi.chanlist_treeview .toolbar, #kiwi.narrow .toolbar { position:static; } +#kiwi.chanlist_treeview .toolbar .app_tools, #kiwi.narrow .toolbar .app_tools { float:none; } +#kiwi.narrow.chanlist_treeview .panels { left:0; } +#kiwi.chanlist_treeview .toolbar .tabs, #kiwi.narrow .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#383838; overflow-y:auto; } +#kiwi.chanlist_treeview .tabs ul li, #kiwi.narrow .tabs ul li { display:block; float:none; } #kiwi.chanlist_treeview .tabs ul li .activity { float:right; } #kiwi.chanlist_treeview .tabs ul li.active { padding-left:1em; } +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar .main .tabs_menu { -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -webkit-transition-duration:0.3s; transition-duration:0.3s; } +#kiwi.narrow.with_sidebar .panels, #kiwi.narrow.with_sidebar .controlbox { -moz-transform:translateX(160px); -ms-transform:translateX(160px); -webkit-transform:translateX(160px); transform:translateX(160px); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow.with_sidebar .toolbar .tabs { -moz-transform:translateX(0); -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox { left: 0; } +#kiwi.narrow.with_sidebar .toolbar .panellist { width: 150px; } +#kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar_overlay { top: 36px; } +#kiwi.narrow .toolbar .tabs { -moz-transform:translateX(-160px); -ms-transform:translateX(-160px); -webkit-transform:translateX(-160px); transform:translateX(-160px); z-index: 4; } +#kiwi.narrow.with_sidebar .toolbar .tabs { height: 100% } +#kiwi .toolbar_overlay, #kiwi.narrow .toolbar .topic, #kiwi .toolbar .app_tools ul li.tabs_menu { display: none; } +#kiwi.narrow .toolbar_overlay { position: absolute; left: 0; height: 100%; width: 100%; z-index: 3; background-color: rgba(0,0,0,0.5); } +#kiwi.narrow.with_sidebar .toolbar_overlay { display: block; } +#kiwi.narrow.with_sidebar .controlbox { border-top: none; } +#kiwi.narrow.with_sidebar .panels { bottom: 0; } +#kiwi.narrow .toolbar .main { text-align: right; } +#kiwi.narrow .toolbar .main .tabs_menu { position: absolute; left: 0; margin-top: 10px; margin-left: 10px !important; } +#kiwi.narrow.with_sidebar .toolbar .main .tabs_menu { margin-left: 0 !important; } +#kiwi.narrow .tabs_activity {display:none; position: absolute; width: 7px; height: 7px; background-color: #8ab746; z-index: 3; top: 0px; right: -3px; border-radius: 3px; box-shadow: 0px 0px 5px 2px #8ab746;} +#kiwi .tabs_activity {display:none;} +#kiwi.narrow .tabs ul li .activity { float:right; } +#kiwi.narrow .tabs ul li.active { padding-left:1em; } +#kiwi.narrow .toolbar .app_tools ul li.tabs_menu { display: inline; } + #kiwi #chanlist { margin: 0.5em 1em; } diff --git a/client/assets/themes/relaxed/style.css b/client/assets/themes/relaxed/style.css index 627bc65b2..97ffa292d 100644 --- a/client/assets/themes/relaxed/style.css +++ b/client/assets/themes/relaxed/style.css @@ -120,6 +120,7 @@ #kiwi .messages .msg .time { float:right; margin-top: 3px; color:#999; padding:1px 5px 0 0; display:none; font-size: 11px; width: 6em; text-align:right; } #kiwi .messages .msg .nick { width: 8em; float:left; font-size:12px; font-family:Arial; text-align:right; padding: 4px; overflow:hidden; white-space: nowrap; line-height: 20px; } #kiwi .messages .msg .text { min-height: 20px; display:block; margin-left:8em; border-left: 0px solid #DEDEDE; white-space:pre-wrap; word-wrap:break-word; font-family:arial; padding:4px; padding-left: 10px; border-left: 1px solid #dedede; line-height: 20px; } +#kiwi.narrow .messages .msg .text {padding-left: 4px;} #kiwi .messages .msg.action .nick { } #kiwi .messages .msg.action .text { color:#009900; font-style:italic; } @@ -372,6 +373,7 @@ #kiwi .toolbar .app_tools { width:200px; text-align: center; color:#D4D4D4; } +#kiwi.chanlist_treeview .toolbar .app_tools { width:auto; text-align: right; } #kiwi.narrow .toolbar .tabs { margin-right:0; } #kiwi.narrow .toolbar .app_tools { width:auto; } #kiwi .toolbar .app_tools ul li { @@ -436,20 +438,42 @@ } #kiwi .server_select .kiwi_logo img { display:inline; width:24px; } - #kiwi.chanlist_treeview .panels { left:160px; } -#kiwi.chanlist_treeview .toolbar { position:static; } -#kiwi.chanlist_treeview .toolbar .app_tools { float:none; width: 160px; } -#kiwi.chanlist_treeview .toolbar > div { margin-left:0px; } -#kiwi.chanlist_treeview .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#383838; overflow-y:auto; } +#kiwi.chanlist_treeview .toolbar, #kiwi.narrow .toolbar { position:static; } +#kiwi.chanlist_treeview .toolbar .app_tools, #kiwi.narrow .toolbar .app_tools { float:none; } +#kiwi.narrow.chanlist_treeview .panels { left:0; } +#kiwi.chanlist_treeview .toolbar > div { margin-left:0; } +#kiwi.chanlist_treeview .toolbar .tabs, #kiwi.narrow .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#383838; overflow-y:auto; } + #kiwi.chanlist_treeview .toolbar .panellist { float: none; display: block;} -#kiwi.chanlist_treeview .tabs ul li { display:block; float:none; margin-right: 0px; /*border-bottom: 1px solid #666*/ } +#kiwi.chanlist_treeview .tabs ul li, #kiwi.narrow .tabs ul li { display:block; float:none; margin-right: 0px; /*border-bottom: 1px solid #666*/ } #kiwi.chanlist_treeview .tabs ul li .activity { position:absolute; right:5px; } #kiwi.chanlist_treeview .toolbar .panellist li { } #kiwi.chanlist_treeview .toolbar .panellist .active { padding-left: 6px; padding-right:23px; border:none; border-left:2px solid #df6b26; border-bottom:none; } #kiwi.chanlist_treeview .tabs ul li.active { margin-right:0; border-right-width:0} #kiwi.chanlist_treeview .toolbar .topic { margin-left: 160px;} +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar .main .tabs_menu { -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -webkit-transition-duration:0.3s; transition-duration:0.3s; } +#kiwi.narrow.with_sidebar .panels, #kiwi.narrow.with_sidebar .controlbox { -moz-transform:translateX(160px); -ms-transform:translateX(160px); -webkit-transform:translateX(160px); transform:translateX(160px); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow.with_sidebar .toolbar .tabs { -moz-transform:translateX(0); -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); } +#kiwi.narrow .panels, #kiwi.narrow .controlbox { left: 0; } +#kiwi.narrow .toolbar .panellist .active { padding-right: 23px; border-top: 0; border-left: 2px solid #df6b26; border-bottom:none; } +#kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar_overlay { top: 36px; } +#kiwi.narrow .toolbar .tabs { -moz-transform:translateX(-160px); -ms-transform:translateX(-160px); -webkit-transform:translateX(-160px); transform:translateX(-160px); z-index: 4; } +#kiwi.narrow.with_sidebar .toolbar .tabs { height: 100% } +#kiwi .toolbar_overlay, #kiwi.narrow .toolbar .topic, #kiwi .toolbar .app_tools ul li.tabs_menu { display: none; } +#kiwi.narrow .toolbar_overlay { position: absolute; left: 0; height: 100%; width: 100%; z-index: 3; background-color: rgba(0,0,0,0.5); } +#kiwi.narrow.with_sidebar .toolbar_overlay { display: block; } +#kiwi.narrow.with_sidebar .controlbox { border-top: none; } +#kiwi.narrow.with_sidebar .panels { bottom: 0; } +#kiwi.narrow .toolbar .main { text-align: right; } +#kiwi.narrow .toolbar .main .tabs_menu { position: absolute; left: 0; margin-top: 10px; margin-left: 10px !important; } +#kiwi.narrow.with_sidebar .toolbar .main .tabs_menu { margin-left: 0 !important; } +#kiwi.narrow .tabs_activity {display:none; position: absolute; width: 7px; height: 7px; background-color: #8ab746; z-index: 3; top: 0px; right: -3px; border-radius: 3px; box-shadow: 0px 0px 5px 2px #8ab746;} +#kiwi .tabs_activity {display:none;} +#kiwi.narrow .tabs ul li .activity { float:right; } +#kiwi.narrow .tabs ul li.active { padding-left:1em; } +#kiwi.narrow .toolbar .app_tools ul li.tabs_menu { display: inline; } #kiwi .applet_chanlist { margin: 0.5em 1em; } diff --git a/client/src/index.html.tmpl b/client/src/index.html.tmpl index aa74ce04b..5c34e651b 100644 --- a/client/src/index.html.tmpl +++ b/client/src/index.html.tmpl @@ -20,6 +20,7 @@
+
diff --git a/client/src/views/apptoolbar.js b/client/src/views/apptoolbar.js index fd097c824..88c291308 100644 --- a/client/src/views/apptoolbar.js +++ b/client/src/views/apptoolbar.js @@ -1,7 +1,8 @@ _kiwi.view.AppToolbar = Backbone.View.extend({ events: { 'click .settings': 'clickSettings', - 'click .startup': 'clickStartup' + 'click .startup': 'clickStartup', + 'click .tabs_menu': 'clickTabsMenu' }, initialize: function () { @@ -19,5 +20,16 @@ _kiwi.view.AppToolbar = Backbone.View.extend({ clickStartup: function (event) { event.preventDefault(); _kiwi.app.startup_applet.view.show(); + }, + + clickTabsMenu: function (event) { + event.preventDefault(); + _kiwi.app.view.$el.toggleClass('with_sidebar'); + _kiwi.app.rightbar.$el.addClass('disabled'); + _kiwi.app.view.$el.find('.tabs_activity').hide(); + _kiwi.app.view.doLayout(); + _kiwi.app.view.$el.find('.toolbar_overlay').click(function() { + _kiwi.app.view.$el.removeClass('with_sidebar'); + }); } }); diff --git a/client/src/views/channel.js b/client/src/views/channel.js index 4ad478fd5..acd15efbd 100644 --- a/client/src/views/channel.js +++ b/client/src/views/channel.js @@ -125,6 +125,11 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({ _kiwi.app.view.playSound('highlight'); } + // Tabbar highlight when in mobile view + if((msg.is_highlight || this.model.isQuery()) && !this.model.isActive() && _kiwi.app.view.$el.hasClass('narrow') === true && !_kiwi.app.view.$el.hasClass('with_sidebar')) { + _kiwi.app.view.$el.find('.tabs_activity').show(); + } + // Update the activity counters (function () { // Only inrement the counters if we're not the active panel