diff --git a/couchpotato/core/plugins/movie/static/list.js b/couchpotato/core/plugins/movie/static/list.js index ca63f023..5a5d6808 100644 --- a/couchpotato/core/plugins/movie/static/list.js +++ b/couchpotato/core/plugins/movie/static/list.js @@ -4,7 +4,8 @@ var MovieList = new Class({ options: { navigation: true, - limit: 50 + limit: 50, + menu: [] }, movies: [], @@ -115,6 +116,25 @@ var MovieList = new Class({ 'change': self.search.bind(self) } }), + self.navigation_menu = new Element('div.menu').adopt( + self.navigation_menu_ul = new Element('ul'), + self.navigation_menu_toggle = new Element('a.button.onlay', { + 'events': { + 'click': function(){ + self.navigation_menu_ul.toggleClass('show') + + if(self.navigation_menu_ul.hasClass('show')) + this.addEvent('outerClick', function(){ + self.navigation_menu_ul.removeClass('show') + this.removeEvents('outerClick'); + }) + else + this.removeEvents('outerClick'); + + } + } + }) + ), self.mass_edit_form = new Element('div.mass_edit_form').adopt( new Element('span.select').adopt( self.mass_edit_select = new Element('input[type=checkbox].inlay', { @@ -198,6 +218,14 @@ var MovieList = new Class({ } }); + + // Add menu or hide + if (self.options.menu.length > 0) + self.options.menu.each(function(menu_item){ + self.navigation_menu_ul.adopt(new Element('li').adopt(menu_item)); + }) + else + self.navigation_menu.hide() self.nav_scrollspy = new ScrollSpy({ min: 10, diff --git a/couchpotato/core/plugins/movie/static/movie.css b/couchpotato/core/plugins/movie/static/movie.css index 4cf9a7b2..8d089f5e 100644 --- a/couchpotato/core/plugins/movie/static/movie.css +++ b/couchpotato/core/plugins/movie/static/movie.css @@ -310,7 +310,6 @@ } .movies .alph_nav { - overflow: hidden; transition: box-shadow .4s linear; position: fixed; z-index: 2; @@ -359,15 +358,14 @@ .movies .alph_nav input { padding: 6px 5px; - margin: 0; - float: right; + margin: 0 0 0 6px; + float: left; width: 155px; height: 25px; - float: right; } .movies .alph_nav .actions { - margin: 0 32px 0 0; + margin: 0 6px 0 0; -moz-user-select: none; } .movies .alph_nav .actions li { @@ -448,4 +446,64 @@ .movies .alph_nav .mass_edit_form .delete span { margin: 0 10px 0 0; } - \ No newline at end of file + + .movies .alph_nav .menu { + float: right; + } + + .movies .alph_nav .menu > a { + display: block; + background: url('../images/sprite.png') no-repeat center -137px; + height: 25px; + width: 25px; + border: 1px solid rgba(0,0,0,0.3); + } + + .movies .alph_nav .menu ul:before { + content: ' '; + height: 0; + position: absolute; + width: 0; + border: 6px solid transparent; + border-bottom-color: rgba(0,0,0,0.8); + margin: -16px 0 0 147px; + } + + .movies .alph_nav .menu ul { + display: none; + border: 1px solid #333; + background: rgba(0,0,0,0.8); + border-radius: 3px; + padding: 4px; + position: absolute; + z-index: 9; + margin: 32px 0 0 -145px; + width: 185px; + box-shadow: 0 10px 20px -10px rgba(0,0,0,0.4); + } + .movies .alph_nav .menu ul.show { + display: block; + } + .movies .alph_nav .menu ul li { + width: 100%; + height: auto; + } + + .movies .alph_nav .menu ul li a { + display: block; + border-bottom: 1px solid rgba(255,255,255,0.2); + padding: 0 10px; + box-shadow: none; + font-weight: normal; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + } + + .movies .alph_nav .menu ul li:last-child a { + border: none; + color: #fff; + } + .movies .alph_nav .menu ul li a:hover { + background: rgba(255,255,255,0.1); + } \ No newline at end of file diff --git a/couchpotato/static/images/sprite.png b/couchpotato/static/images/sprite.png index 5d753c97..60cc5e8f 100644 Binary files a/couchpotato/static/images/sprite.png and b/couchpotato/static/images/sprite.png differ diff --git a/couchpotato/static/scripts/block/navigation.js b/couchpotato/static/scripts/block/navigation.js index b0674b25..b6886f8d 100644 --- a/couchpotato/static/scripts/block/navigation.js +++ b/couchpotato/static/scripts/block/navigation.js @@ -35,7 +35,7 @@ Block.Navigation = new Class({ addTab: function(tab){ var self = this - return new Element('li').adopt( + return new Element('li.tab_'+(tab.text.toLowerCase() || 'unknown')).adopt( new Element('a', tab) ).inject(self.nav) diff --git a/couchpotato/static/scripts/page/manage.js b/couchpotato/static/scripts/page/manage.js index 34529c55..8a88a367 100644 --- a/couchpotato/static/scripts/page/manage.js +++ b/couchpotato/static/scripts/page/manage.js @@ -9,27 +9,42 @@ Page.Manage = new Class({ var self = this; if(!self.list){ - self.refresh_button = new Element('a.icon.refresh', { - 'text': 'Refresh', + self.refresh_button = new Element('a', { + 'title': 'Rescan your library for new movies', + 'text': 'Full library refresh', 'events':{ - 'click': self.refresh.bind(self) + 'click': self.refresh.bind(self, true) } - }).inject(self.el); + }); + + self.refresh_quick = new Element('a', { + 'title': 'Just scan for recently changed', + 'text': 'Quick library scan', + 'events':{ + 'click': self.refresh.bind(self, false) + } + }); self.list = new MovieList({ 'identifier': 'manage', 'status': 'done', - 'actions': MovieActions + 'actions': MovieActions, + 'menu': [self.refresh_button, self.refresh_quick] }); $(self.list).inject(self.el); } }, - refresh: function(){ + refresh: function(full){ var self = this; + p(full) - Api.request('manage.update') + Api.request('manage.update', { + 'data': { + 'full': full ? 1 : null + } + }) } diff --git a/couchpotato/static/style/main.css b/couchpotato/static/style/main.css index fef35b24..a3e56166 100644 --- a/couchpotato/static/style/main.css +++ b/couchpotato/static/style/main.css @@ -307,13 +307,24 @@ body > .spinner, .mask{ overflow: hidden; font-weight: bold; } + + .select .list:before { + content: ' '; + height: 0; + position: absolute; + width: 0; + border: 6px solid transparent; + border-bottom-color: #282d34; + margin: -11px 0 0 70px; + } + .select .list { display: none; background: #282d34; border: 1px solid #1f242b; position: absolute; - margin: 25px 0 0 0; - box-shadow: 0 1px 2px rgba(0,0,0,0.4); + margin: 30px 0 0 0; + box-shadow: 0 20px 20px -10px rgba(0,0,0,0.4); border-radius:3px; z-index: 3; } @@ -374,6 +385,12 @@ body > .spinner, .mask{ rgb(73,83,98) 100% ); } +.onlay:active, .inlay.reversed > li:active { + color: #fff; + border: 1px solid transparent; + background-color: #282d34; + box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25); +} .question { display: block;