diff --git a/README.md b/README.md index 96e7ad7..835ce97 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,10 @@ With no official release for the Spotify Desktop Client, there's nothing I can d [Releases] ---- +[v0.2] - UI redesign + - UI updated to darker theme + - settings are kept when playing artist changes + [v0.1.3] - Play tracks from artist node - look and feel of the nodes updated - on double click a node in the graph, top tracks of the artist are played @@ -91,6 +95,7 @@ José Bateira [@\_carsy\_]:http://twitter.com/_carsy_ [here]:https://github.com/carsy/rama-spotify/releases/latest [Releases]:https://github.com/carsy/rama-spotify/releases/latest +[v0.2]:https://github.com/carsy/rama-spotify/releases/tag/v0.2 [v0.1.3]:https://github.com/carsy/rama-spotify/releases/tag/v0.1.3 [v0.1.2]:https://github.com/carsy/rama-spotify/releases/tag/v0.1.2 [v0.1.1]:https://github.com/carsy/rama-spotify/releases/tag/v0.1.1 diff --git a/bower.json b/bower.json index a6782b7..1c5bb9b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "rama", - "version": "0.1.3", + "version": "0.2.0", "homepage": "https://github.com/carsy/master-thesis", "authors": [ "Zé Bateira " @@ -21,12 +21,12 @@ "tests" ], "dependencies": { - "jquery": "~2.1.0", - "vis": "~0.7.0", - "normalize-css": "~3.0.0", - "underscore": "~1.6.0" + "jquery": "^2.1.0", + "vis": "^0.7.0", + "normalize-css": "^3.0.0", + "underscore": "^1.6.0" }, "devDependencies": { - "jasmine-jquery": "~2.0.3" + "jasmine-jquery": "^2.0.3" } } \ No newline at end of file diff --git a/css/main.css b/css/main.css index 0b176aa..758bf71 100644 --- a/css/main.css +++ b/css/main.css @@ -251,30 +251,42 @@ body, html { box-sizing: border-box; } -/* line 15, ../sass/main.scss */ +/* line 31, ../sass/main.scss */ a { text-decoration: none; } -/* line 19, ../sass/main.scss */ +/* line 35, ../sass/main.scss */ html, body { height: 100%; + color: #a1a3a6; } -/* line 31, ../sass/main.scss */ +/* line 43, ../sass/main.scss */ #view_container { - height: calc(100% - 60px - 34px); + height: calc(100% - 60px); + background-color: #222326; } -/* line 34, ../sass/main.scss */ +/* line 47, ../sass/main.scss */ #view_container .view { height: 100%; } +/* line 52, ../sass/main.scss */ +.sp-throbber-background { + background-color: #ecebe8; +} + +/* line 56, ../sass/main.scss */ +.sp-tabbar { + display: none !important; +} + /* imports */ /* Header Styles */ /* line 4, ../sass/_header.scss */ .sp-header { - background-color: #333; + background-color: #222326; max-height: 60px; position: relative; min-height: 60px; @@ -298,7 +310,7 @@ html, body { top: 15px; padding-left: 10px; padding-right: 10px; - background-color: black; + background-color: #313336; margin-left: 10px; } /* line 37, ../sass/_header.scss */ @@ -331,83 +343,86 @@ html, body { #view_container { overflow: hidden; position: relative; + background-color: #1c1c1f; } -/* line 11, ../sass/_now_playing.scss */ +/* line 12, ../sass/_now_playing.scss */ .settings { position: absolute; z-index: 2; top: 10px; - right: 20px; + right: 10px; } -/* line 17, ../sass/_now_playing.scss */ +/* line 18, ../sass/_now_playing.scss */ .settings .settings-btn { float: right; width: 20px; height: 20px; - margin-bottom: 10px; - margin-right: 4px; - background: url(../img/settings-dark.png) no-repeat; + margin: 10px 4px 10px 0; + opacity: 0.8; + background: url(../img/settings.png) no-repeat; background-size: cover; } -/* line 28, ../sass/_now_playing.scss */ +/* line 29, ../sass/_now_playing.scss */ .settings .settings-btn:hover { cursor: pointer; } -/* line 32, ../sass/_now_playing.scss */ +/* line 33, ../sass/_now_playing.scss */ .settings .settings-btn.opened { - opacity: 0.8; + opacity: 1; } -/* line 36, ../sass/_now_playing.scss */ +/* line 37, ../sass/_now_playing.scss */ .settings .settings-btn:active { -webkit-transform: scale(0.9, 0.9); } -/* line 41, ../sass/_now_playing.scss */ +/* line 42, ../sass/_now_playing.scss */ .settings .settings-form { display: none; position: relative; float: right; padding: 10px 6px; - background-color: #ecebe8; + background-color: #222326; border-radius: 2px; border-width: 1px; - border-color: #bbb; + border-color: #999; border-style: solid; } -/* line 54, ../sass/_now_playing.scss */ +/* line 55, ../sass/_now_playing.scss */ .settings .settings-form .tri { position: absolute; top: -5px; right: 8px; width: 10px; height: 10px; - background-color: #ecebe8; + background-color: #222326; border-radius: 2px; border-width: 1px; - border-color: #bbb transparent transparent #bbb; + border-color: #999 transparent transparent #999; border-style: solid; -webkit-transform: rotate(45deg); } -/* line 71, ../sass/_now_playing.scss */ +/* line 72, ../sass/_now_playing.scss */ .settings .settings-form .option { overflow: auto; } -/* line 74, ../sass/_now_playing.scss */ +/* line 75, ../sass/_now_playing.scss */ .settings .settings-form .option:not(.first-child) { margin-top: 5px; } -/* line 78, ../sass/_now_playing.scss */ +/* line 79, ../sass/_now_playing.scss */ .settings .settings-form .option label { float: left; margin-right: 5px; } -/* line 82, ../sass/_now_playing.scss */ +/* line 83, ../sass/_now_playing.scss */ .settings .settings-form .option input { padding: 2px; width: 30px; float: right; + background-color: #222326; + border-width: 1px; } -/* line 87, ../sass/_now_playing.scss */ +/* line 90, ../sass/_now_playing.scss */ .settings .settings-form .option input[name=treemode] { margin-top: 5px; margin-left: 5px; diff --git a/deploy b/deploy new file mode 100755 index 0000000..17c71d8 --- /dev/null +++ b/deploy @@ -0,0 +1,10 @@ +#/bin/zsh + +version=$1 +buildfolder="rama-spotify" + +git tag $version +git push --tags +grunt build +zip -r "$buildfolder_$version".zip "$buildfolder"/* +tar -cf "$buildfolder_$version".zip "$buildfolder"/* diff --git a/img/settings.png b/img/settings.png index 8992408..b7aa387 100644 Binary files a/img/settings.png and b/img/settings.png differ diff --git a/install.sh b/install.sh index 9a2f8a4..2c923bb 100644 --- a/install.sh +++ b/install.sh @@ -1,7 +1,8 @@ #!/bin/sh +version="v0.2" + mkdir ~/Spotify ; cd ~/Spotify -rm -rf rama-spotify -wget https://github.com/carsy/rama-spotify/releases/download/v0.1.3/rama-spotify_v0.1.3.tar.gz -tar -xvf rama-spotify_v0.1.3.tar.gz -open spotify:app:rama-spotify +wget https://github.com/carsy/rama-spotify/releases/download/"$version"/rama-spotify_"$version".tar.gz +tar -xvf rama-spotify_"$version".tar.gz +open spotify:app:rama-spotify \ No newline at end of file diff --git a/js/controllers/nowplaying.js b/js/controllers/nowplaying.js index 7b84b97..fafae65 100644 --- a/js/controllers/nowplaying.js +++ b/js/controllers/nowplaying.js @@ -25,6 +25,12 @@ var NowPlaying = function(viewId, viewpath) { shape: 'box', radius: 1, }, + edges: { + color: { + color: '#8f9096', + highlight: '#8f9096' + } + }, stabilize: true // clustering: true }; @@ -54,8 +60,13 @@ NowPlaying.prototype = { }); }, updateView: function() { - if (this.artistGraph) + if (this.artistGraph) { this.artistGraph.redraw(); + if (this.artistGraph.throbber) + this.artistGraph.throbber.setPosition('center', 'center'); + } + + return this; }, @@ -140,6 +151,7 @@ NowPlaying.prototype = { this.artistGraph.throbber = Throbber.forElement(document.getElementById(this.viewId)); this.artistGraph.throbber.setPosition('center', 'center'); + this.artistGraph.throbber._addBackground(); } }; diff --git a/js/models/artistgraph.js b/js/models/artistgraph.js index 5dd23d0..c41778d 100644 --- a/js/models/artistgraph.js +++ b/js/models/artistgraph.js @@ -92,7 +92,7 @@ ArtistGraph.prototype = { var extraEdge = { from: rootArtist.nodeid, to: duplicated.id, - color: '#ddd' + color: '#aaa' }; this.extraEdges.push(extraEdge); @@ -160,6 +160,7 @@ ArtistGraph.prototype = { console.log('# nodes: ' + this.data.nodes.length); console.log('# edges: ' + this.data.edges.length); } + }, updateGraph: function(config) { this.branching = config.branching || this.branching; diff --git a/manifest.json b/manifest.json index 4ca20fa..62d5993 100644 --- a/manifest.json +++ b/manifest.json @@ -12,8 +12,9 @@ "BundleType": "Application", "BundleVersion": "0.2", "Dependencies": { - "api": "1.35", - "views": "1.56.3" + "api": "1.0.0", + "views": "1.0.0", + "resources": "0.7.0" }, "SupportedDeviceClasses": ["Desktop"], "SupportedLanguages": [ diff --git a/package.json b/package.json index 83fac19..28e6fbe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "RAMA", - "version": "0.1.3", + "version": "0.2.0", "description": "Relational Artist MAps", "repository": { "type": "git", @@ -14,11 +14,11 @@ "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-watch": "^0.6.0", - "grunt-contrib-jshint": "~0.9.2", + "grunt-contrib-jshint": "*", "grunt-contrib-jasmine": "^0.6.1", "grunt-contrib-compass": "~0.7.2", "grunt-usemin": "^2.0.2", - "grunt-contrib-concat": "~0.3.0", + "grunt-contrib-concat": "^0.3.0", "grunt-contrib-uglify": "^0.4.0", "grunt-contrib-cssmin": "^0.9.0", "grunt-contrib-copy": "^0.5.0", diff --git a/sass/_header.scss b/sass/_header.scss index 76405ee..f27dcef 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -2,7 +2,7 @@ .sp-header { - background-color: #333; + background-color: $new-bg; max-height: $header-height; position: relative; @@ -31,7 +31,7 @@ padding-left: 10px; padding-right: 10px; - background-color: black; + background-color: $new-bg-lighter2; margin-left: 10px; a { diff --git a/sass/_now_playing.scss b/sass/_now_playing.scss index aab06b2..5d0cc64 100644 --- a/sass/_now_playing.scss +++ b/sass/_now_playing.scss @@ -5,6 +5,7 @@ #view_container { overflow: hidden; position: relative; + background-color: $new-bg-darker; } @@ -12,17 +13,17 @@ position: absolute; z-index: 2; top: 10px; - right: 20px; + right: 10px; .settings-btn { float: right; width: 20px; height: 20px; - margin-bottom: 10px; - margin-right: 4px; + margin: 10px 4px 10px 0; + opacity: 0.8; - background: url(../img/settings-dark.png) no-repeat; + background: url(../img/settings.png) no-repeat; background-size: cover; &:hover { @@ -30,7 +31,7 @@ } &.opened { - opacity: 0.8; + opacity: 1; } &:active { @@ -45,10 +46,10 @@ padding: 10px 6px; - background-color: $bg-color; + background-color: $new-bg; border-radius: 2px; border-width: 1px; - border-color: #bbb; + border-color: #999; border-style: solid; .tri { @@ -59,10 +60,10 @@ width: 10px; height: 10px; - background-color: $bg-color; + background-color: $new-bg; border-radius: 2px; border-width: 1px; - border-color: #bbb transparent transparent #bbb; + border-color: #999 transparent transparent #999; border-style: solid; -webkit-transform: rotate(45deg); @@ -83,6 +84,8 @@ padding: 2px; width: 30px; float: right; + background-color: $new-bg; + border-width: 1px; &[name=treemode] { margin-top: 5px; diff --git a/sass/main.scss b/sass/main.scss index 8116382..6cac4e6 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -12,30 +12,51 @@ body, html { box-sizing: border-box; } +$bg-color: #ecebe8; +$bg-dark: #474747; +$bg-light: #6b6b6b; + +$new-bg: #222326; +$new-bg-lighter1: #2e2f33; +$new-bg-lighter2: #313336; +$new-bg-darker: #1c1c1f; +$new-white: #dfe0e6; + +$font-color: #a1a3a6; + +$header-height: 60px; +$tabs-height: 34px; +$content-height: calc(100% - #{$header-height}); + a { text-decoration: none; } html, body { height: 100%; + + color: $font-color; } -$bg-color: #ecebe8; -$bg-dark: #474747; -$bg-light: #6b6b6b; -$header-height: 60px; -$tabs-height: 34px; -$content-height: calc(100% - #{$header-height} - #{$tabs-height}); #view_container { height: $content-height; + background-color: $new-bg; .view { height: 100%; } } +.sp-throbber-background { + background-color: $bg-color; +} + +.sp-tabbar { + display: none !important; +} + /* imports */ @import "header"; @import "now_playing";