Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add handles to playlist sort tracks #789

Merged
merged 18 commits into from
Sep 27, 2019
Merged

Add handles to playlist sort tracks #789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
94c71cb
Add SVGs for handles, disable pointer events for full track
ofsound Sep 26, 2019
fcbcec3
Add pointer events back just to the drag handle and then remove button
ofsound Sep 26, 2019
849b3c6
Add the 3 states for the handle icons
ofsound Sep 26, 2019
2069cc0
Make a separate div in _asset_white for the handles, hide the play bu…
ofsound Sep 26, 2019
c956612
Update playlist sort controller with new feedback
ofsound Sep 26, 2019
f80c52b
Add attempt at Sortable Selenium test w/ custom hack
sudara Sep 26, 2019
f656777
update js packages
ofsound Sep 27, 2019
a309ec3
'drag_to' works again after updating capybara and sortable
sudara Sep 27, 2019
4689574
Implement playlist_sort flash in same way as playlists_sort
sudara Sep 27, 2019
7f5cdae
Let js handle dem handles
sudara Sep 27, 2019
3068842
Add the mini handle icon for the playlist sorting instructions
ofsound Sep 27, 2019
b3db0b3
Add grey600 to color_mapping.scss
ofsound Sep 27, 2019
6eae4b3
Adjust background colors of the remove and add tiny instruction icons
ofsound Sep 27, 2019
72fb38e
Adjust the size and border radius of the small instruction icons
ofsound Sep 27, 2019
ab2cd96
Adjust the baseline of the icons
ofsound Sep 27, 2019
45f1fe1
Use explicit handles for sorting tracks in a playlist
sudara Sep 27, 2019
d69eb0a
Try to better center those icons
ofsound Sep 27, 2019
d5db4d4
Add .4s transition between drag_handle states
ofsound Sep 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions Gemfile.lock
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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