From 43fc43b2add75357cd724058bee539e97f08ab23 Mon Sep 17 00:00:00 2001 From: Ruud Date: Fri, 3 Jul 2015 17:21:34 +0200 Subject: [PATCH] Mass edit popup --- couchpotato/core/media/movie/_base/static/list.js | 7 ++- couchpotato/core/media/movie/_base/static/movie.js | 13 ++--- .../core/media/movie/_base/static/movie.scss | 56 +++++++++++++++++++--- couchpotato/static/style/combined.min.css | 12 +++-- 4 files changed, 65 insertions(+), 23 deletions(-) diff --git a/couchpotato/core/media/movie/_base/static/list.js b/couchpotato/core/media/movie/_base/static/list.js index f3369db..9062d80 100644 --- a/couchpotato/core/media/movie/_base/static/list.js +++ b/couchpotato/core/media/movie/_base/static/list.js @@ -281,7 +281,6 @@ var MovieList = new Class({ ); // Mass edit - self.mass_edit_select_class = new Form.Check(self.mass_edit_select); Quality.getActiveProfiles().each(function(profile){ new Element('option', { 'value': profile.get('_id'), @@ -377,10 +376,10 @@ var MovieList = new Class({ var indeterminate = selected > 0 && selected < movies, checked = selected == movies && selected > 0; - self.mass_edit_select.set('indeterminate', indeterminate); + document.body[selected > 0 ? 'addClass' : 'removeClass']('mass_editing'); - self.mass_edit_select_class[checked ? 'check' : 'uncheck'](); - self.mass_edit_select_class.element[indeterminate ? 'addClass' : 'removeClass']('indeterminate'); + self.mass_edit_select.set('checked', checked); + self.mass_edit_select.indeterminate = indeterminate; self.mass_edit_selected.set('text', selected); }, diff --git a/couchpotato/core/media/movie/_base/static/movie.js b/couchpotato/core/media/movie/_base/static/movie.js index ac3f0ca..1779ba4 100644 --- a/couchpotato/core/media/movie/_base/static/movie.js +++ b/couchpotato/core/media/movie/_base/static/movie.js @@ -17,8 +17,10 @@ var Movie = new Class({ self.el = new Element('a.movie', { 'events': { 'click': function(e){ - (e).preventDefault(); - self.openDetails(); + if(e.target.get('tag') != 'input'){ + (e).preventDefault(); + self.openDetails(); + } }, 'mouseenter': function(){ if(self.actions.length <= 0){ @@ -319,8 +321,6 @@ var Movie = new Class({ if(!self.thumbnail) self.el.addClass('no_thumbnail'); - self.select_checkbox_class = new Form.Check(self.select_checkbox); - // Add profile if(self.profile.data) self.profile.getTypes().each(function(type){ @@ -406,11 +406,6 @@ var Movie = new Class({ return this.data[attr] || this.data.info[attr]; }, - select: function(bool){ - var self = this; - self.select_checkbox_class[bool ? 'check' : 'uncheck'](); - }, - isSelected: function(){ return this.select_checkbox.get('checked'); }, diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss index 59d9688..c57a8e6 100644 --- a/couchpotato/core/media/movie/_base/static/movie.scss +++ b/couchpotato/core/media/movie/_base/static/movie.scss @@ -1,5 +1,7 @@ @import "couchpotato/static/style/_mixins"; +$mass_edit_height: 44px; + .page.movies { bottom: auto; z-index: 21; @@ -23,13 +25,6 @@ .movie { - .check { - position: absolute; - top: 0; - left: $padding; - display: none; - } - .quality { span { background: rgba(0,0,0,.2); @@ -119,6 +114,22 @@ background: rgba(0,0,0,.1); } + input[type=checkbox] { + position: absolute; + top: 50%; + left: $padding; + transform: translateY(-50%); + opacity: .5; + + &:checked { + opacity: 1; + } + } + + &:hover input[type=checkbox] { + opacity: 1; + } + .data { padding: $padding/2 $padding; @@ -148,6 +159,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + margin-left: $padding; @include media-phablet { width: 100%; @@ -278,6 +290,10 @@ border-width: 0 $padding/5; } + input[type=checkbox] { + display: none; + } + .poster { position: relative; border-radius: $border_radius; @@ -910,6 +926,7 @@ .alph_nav { + position: relative; @include media-phablet { display: none; @@ -917,6 +934,31 @@ .mass_edit_form { display: none; + background: $background_color; + position: fixed; + top: $header_height; + right: 0; + left: $header_width; + flex-flow: row nowrap; + align-items: center; + transition: max-height 300ms $cubic; + max-height: 0; + overflow: hidden; + + .mass_editing & { + display: flex; + max-height: $mass_edit_height; + } + + > * { + display: flex; + align-items: center; + } + + .select { + margin-left: $padding; + } + } .menus { diff --git a/couchpotato/static/style/combined.min.css b/couchpotato/static/style/combined.min.css index d28e1f1..28d8c43 100644 --- a/couchpotato/static/style/combined.min.css +++ b/couchpotato/static/style/combined.min.css @@ -45,7 +45,6 @@ @media (max-width:480px){.page.movies_manage,.page.movies_wanted{top:44px} } .page.movies_manage .load_more,.page.movies_wanted .load_more{text-align:center;padding:20px;font-size:2em;display:block} -.movie .check{position:absolute;top:0;left:20px;display:none} .movie .quality span{background:rgba(0,0,0,.2);border:1px solid transparent;color:#FFF;border-radius:1px;padding:1px 3px} .movie .quality span.failed{background:#993619} .movie .quality span.available{color:#009902;border-color:#009902;background:#FFF} @@ -65,10 +64,12 @@ .list_list .movie{display:block;border-bottom:1px solid #eaeaea;position:relative;cursor:pointer} .list_list .movie:last-child{border-bottom:none} .list_list .movie:hover{background:rgba(0,0,0,.1)} +.list_list .movie input[type=checkbox]{position:absolute;top:50%;left:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:.5} +.list_list .movie input[type=checkbox]:checked,.list_list .movie:hover input[type=checkbox]{opacity:1} .list_list .movie .data{padding:10px 20px} .list_list .movie .data .info{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap} .list_list .movie .data .info .title{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto} -.list_list .movie .data .info .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.list_list .movie .data .info .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:20px} @media (max-width:480px){.movies .actions{pointer-events:none} .list_list .movie .data{padding:10px} .list_list .movie .data .info{display:block} @@ -102,6 +103,7 @@ @media (max-width:480px){.thumb_list{padding:0 3.33px} .thumb_list .movie{max-width:50%;border-width:0 4px} } +.thumb_list .movie input[type=checkbox]{display:none} .thumb_list .movie .poster{position:relative;border-radius:3px;background:center no-repeat #eaeaea;background-size:cover;overflow:hidden;width:100%;padding-bottom:150%} .thumb_list .movie .data{clear:both} .thumb_list .movie .data .info .title{display:-webkit-flex;display:-ms-flexbox;display:flex;padding:3px 0} @@ -229,10 +231,14 @@ .page.movie_details .trailer_container:hover{color:#ac0000} .page.movie_details .trailer_container:hover .icon-play,.page.movie_details .trailer_container:hover .icon-play span{opacity:1} .page.movie_details .trailer_container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} +.alph_nav{position:relative} @media (max-width:480px){.page.movie_details .trailer_container .icon-play span:first-child{margin-left:-15.71px} .alph_nav{display:none} } -.alph_nav .mass_edit_form{display:none} +.alph_nav .mass_edit_form{display:none;background:#FFF;position:fixed;top:80px;right:0;left:132px;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;-ms-flex-align:center;align-items:center;transition:max-height 300ms cubic-bezier(.9,0,.1,1);max-height:0;overflow:hidden} +.mass_editing .alph_nav .mass_edit_form{display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:44px} +.alph_nav .mass_edit_form>*{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center} +.alph_nav .mass_edit_form .select{margin-left:20px} .alph_nav .menus .button{color:rgba(0,0,0,.5)} .alph_nav .menus .actions,.alph_nav .menus .counter,.alph_nav .menus .more_menu{float:left} .alph_nav .menus .actions>a,.alph_nav .menus .counter>a,.alph_nav .menus .more_menu>a{display:inline-block;width:30px;line-height:80px;text-align:center}