Skip to content

Commit

Permalink
Merge pull request #789 from sudara/add_handles_to_playlist_sort_tracks
Browse files Browse the repository at this point in the history 
Add handles to playlist sort tracks
  • Loading branch information
@sudara
sudara authored Sep 27, 2019
2 parents 7484dc7 + d5db4d4 commit 5141a2c
Show file tree
Hide file tree
Showing 19 changed files with 507 additions and 203 deletions.
8 changes: 4 additions & 4 deletions Gemfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ GEM
zeitwerk (~> 2.1, >= 2.1.8)
acts_as_list (0.9.19)
activerecord (>= 3.0)
addressable (2.6.0)
public_suffix (>= 2.0.2, < 4.0)
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
annotate (2.7.5)
activerecord (>= 3.2, < 7.0)
rake (>= 10.4, < 13.0)
Expand Down Expand Up @@ -118,7 +118,7 @@ GEM
concurrent-ruby (~> 1.0)
builder (3.2.3)
byebug (11.0.1)
capybara (3.28.0)
capybara (3.29.0)
addressable
mini_mime (>= 0.1.3)
nokogiri (~> 1.8)
Expand Down Expand Up @@ -313,7 +313,7 @@ GEM
byebug (~> 11.0)
pry (~> 0.10)
psych (3.1.0)
public_suffix (3.1.1)
public_suffix (4.0.1)
puma (4.0.1)
nio4r (~> 2.0)
pundit (2.1.0)
Expand Down
27 changes: 27 additions & 0 deletions app/assets/images/svg/icon_drag_handle_active.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions app/assets/images/svg/icon_drag_handle_idle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions app/assets/images/svg/icon_mini_handle_for_instructions.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 66 additions & 12 deletions app/assets/stylesheets/components/playlist_edit.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
padding-left: 0;
padding-right: 0;
}

#edit_playlist_info {
padding-left: 0;
padding-right: 0;
Expand Down Expand Up @@ -249,6 +249,45 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.playlist_asset {
user-select: none;

a.remove {
pointer-events: all;
}
div.drag_handle {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
div {
user-select: none;
cursor: grab;
width: 30px;
height: 22px;
background-image: image-url("svg/icon_drag_handle_idle.svg");
background-size: 30px 22px;
background-position: center;
background-repeat: no-repeat;
border-radius: 7px;
border: 1px solid $border-color-five;
transition: border-color .4s, background-image .4s;
&:hover {
background-image: image-url("svg/icon_drag_handle_active.svg");
border: 1px solid $border-color-four;
}
&:active {
background-image: image-url("svg/icon_drag_handle_active.svg");
border: 1px solid $accent;
}
}
}
div.play-button {
display: none;
}
}
.playlist_size {
border-radius: 4px;
background-color: $background-color-two;
Expand Down Expand Up @@ -351,7 +390,7 @@
display: none;
}
}

}
.left_instructions,
.right_instructions {
Expand All @@ -362,30 +401,45 @@
@media only screen and (min-width: 749px) and (max-width: 830px) {
min-height: 64px;
}
.remove-inner-inline {

.mini-handle {
display: inline-flex;
width: 15px;
height: 15px;
position: relative;
top: -3px;
border-radius: 4px;
background-color: $edit-playlist-track-button-background;
top: 1px;
align-items: center;
justify-content: center;
svg {
position: relative;
width: 7px;
width: 15px;
height: 13px;
}
}
.remove-inner-inline {
display: inline-flex;
width: 13px;
height: 13px;
position: relative;
top: -2px;
border-radius: 3px;
background-color: $background-color-four;
align-items: center;
justify-content: center;
svg {
position: relative;
width: 8px;
height: 7px;
}
}
.add-inner-inline {
display: inline-flex;
width: 15px;
height: 15px;
width: 13px;
height: 13px;
position: relative;
top: -3px;
border-radius: 4px;
background-color: $edit-playlist-track-button-background;
top: -2px;
border-radius: 3px;
background-color: $background-color-four;
align-items: center;
justify-content: center;
svg {
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/components/playlists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ ul.playlists {
margin-right: 0;
}
&.private {
background-color: $background-color-four;
background-color: $background-color-five;
position: relative;
.private_playlist_padlock {
display: block;
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/components/single_and_playlists_player/playlist_cover_view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ body.cover-view {
.playlist-options {
width: 100%;
height: 50px;
background-color: $background-color-four;
background-color: $background-color-five;
font-family: $sans-font;
border-radius: 0px;
ul {
Expand All @@ -92,9 +92,9 @@ body.cover-view {
float: left;
height: 50px;
border-right: 1px solid $border-color-one;
background-color: $background-color-four;
background-color: $background-color-five;
&:hover {
background-color: $background-color-five;
background-color: $background-color-six;
}
a {
font-size: 12px;
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/components/single_and_playlists_player/playlist_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}
&:hover,
&.active {
background-color: $background-color-four;
background-color: $background-color-five;
a.position-name-time {
color: $font-color-six;
span.track-name {
Expand Down Expand Up @@ -135,11 +135,11 @@
margin-top: 0;
margin-bottom: 0;
li {
background-color: $background-color-four;
background-color: $background-color-five;
overflow: auto;
border-bottom: 1px solid black;
&:hover {
background-color: $background-color-four;
background-color: $background-color-five;
}
a {
font-family: $sans-font;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/components/site_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ footer#site_footer {
margin-right: 2px;
width: 236px;
min-width: 150px;
background-color: $background-color-four;
background-color: $background-color-five;
border-radius: 3px;
color: $font-color-seven;
line-height: 20px;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/components/user.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -519,7 +519,7 @@ main {
padding-bottom: 4px;
padding-left: 0;
flex-wrap: wrap;
background-color: $background-color-four;
background-color: $background-color-five;
color: $font-color-seven;
@include samo-shadow-and-radius();
overflow: auto;
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/themes/color_mapping.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ $grey1100: #232120;
$grey1000: #353535;
$grey900: #4F4D4D;
$grey800: #6E6D6D;
$grey600: #949797;
$grey500: #A6ABAB;
$grey200: #D7DBDB;
$grey100: #E6E8E8;
Expand Down
5 changes: 3 additions & 2 deletions app/assets/stylesheets/themes/dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ $body-font: $white;
$background-color-one: $grey1100;
$background-color-two: $grey1000;
$background-color-three: $grey100;
$background-color-four: $grey1000;
$background-color-five: $black;
$background-color-four: $grey100;
$background-color-five: $grey1000;
$background-color-six: $black;

$font-color-one: $white;
$font-color-two: $grey50;
Expand Down
5 changes: 3 additions & 2 deletions app/assets/stylesheets/themes/white.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ $body-font: $black;
$background-color-one: $white;
$background-color-two: $grey50;
$background-color-three: $grey100;
$background-color-four: $grey1000;
$background-color-five: $black;
$background-color-four: $grey600;
$background-color-five: $grey1000;
$background-color-six: $black;

$font-color-one: $black;
$font-color-two: $grey1000;
Expand Down
10 changes: 6 additions & 4 deletions app/javascript/controllers/playlist_sort_controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import Rails from '@rails/ujs'
import Sortable from 'sortablejs'
import { Controller } from 'stimulus'
import { flashController } from './flash_controller'

export default class extends Controller {
static targets = ['sortable', 'sortUrl', 'addUrl', 'dropzone', 'sourceTracks',
'feedback', 'spinner', 'size', 'trackCount', 'totalTime']

initialize() {
this.sortable = new Sortable(this.sortableTarget, {
handle: '.drag_handle',
onEnd: () => this.maybePostToSort(),
})
this.sortUrl = this.sortUrlTarget.getAttribute('href')
Expand Down Expand Up @@ -38,10 +40,6 @@ export default class extends Controller {
})
}

displaySuccess() {
this.feedbackTarget.innerHTML = '<div class="ajax_success">Saved!</div>'
}

updatePlaylistMetadata() {
const size = this.sortableTarget.childElementCount
this.sizeTarget.innerHTML = `${size}`
Expand All @@ -56,4 +54,8 @@ export default class extends Controller {
const sec = sum % 60
return `${min}:${sec >= 10 ? sec : '0' + sec}`
}

displaySuccess() {
flashController.alertSaved()
}
}
1 change: 1 addition & 0 deletions app/views/assets/_asset_white.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<%= cache([asset, asset.user, logged_in?, local_assigns[:favorite]]) do %>
<div class="asset_top">
<div class="asset_top_row">
<div class="drag_handle"><div class="inner"></div></div>
<div class="play-button button" data-target="normal-playback.play" data-action="click->normal-playback#togglePlay">
<%= link_to user_track_path(asset.user.login, asset.permalink, format: :mp3),
class: 'play_link', title: 'play' do %>
Expand Down
3 changes: 2 additions & 1 deletion app/views/playlists/edit_white.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@
<div id="columns" class="edit_playlist_columns" data-controller="playlist-sort">
<div id="left">
<p class="left_instructions">
You can reorder your playlist by dragging your tracks. Remove them from the playlist with the <span class="remove-inner-inline"><%== render file: svg_path('svg/icon_x.svg') %></span>
Reorder your playlist by dragging your tracks by the <span class="mini-handle"><%== render file: svg_path('svg/icon_mini_handle_for_instructions.svg') %></span> icon.
Remove them from the playlist with the <span class="remove-inner-inline"><%== render file: svg_path('svg/icon_x.svg') %></span>
icon.
</p>
<div class="box">
Expand Down
Loading

0 comments on commit 5141a2c

Please sign in to comment.