diff --git a/src/App.css b/src/App.css
index b8e6411b..56b9453d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,6 +20,10 @@ body {
background-color: rgba(59, 83, 90, 0.9);
}
+a {
+ text-decoration: none;
+}
+
#search {
width: 100%;
position: fixed;
diff --git a/src/Skin.js b/src/Skin.js
index 060c9517..c02085e2 100644
--- a/src/Skin.js
+++ b/src/Skin.js
@@ -1,4 +1,9 @@
import React from "react";
+import * as Utils from "./utils";
+
+function isModifiedEvent(event) {
+ return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
export default class Skin extends React.Component {
constructor(props) {
@@ -25,7 +30,7 @@ export default class Skin extends React.Component {
render() {
return (
-
(this._ref = node)}
style={{
@@ -39,17 +44,25 @@ export default class Skin extends React.Component {
left: this.props.left,
cursor: "pointer"
}}
+ onClick={e => {
+ if (
+ !e.defaultPrevented && // onClick prevented default
+ e.button === 0 && // ignore everything but left clicks
+ !isModifiedEvent(e) // ignore clicks with modifier keys
+ ) {
+ e.preventDefault();
+ const { top, left } = this._ref.getBoundingClientRect();
+ this.props.selectSkin(this.props.hash, { top, left });
+ }
+ }}
+ href={Utils.getPermalinkUrlFromHash(this.props.hash)}
>

{
- const { top, left } = this._ref.getBoundingClientRect();
- this.props.selectSkin(this.props.hash, { top, left });
- }}
/>
-
+
);
}
}
diff --git a/src/redux/selectors.js b/src/redux/selectors.js
index 72f5af8b..f6dedb59 100644
--- a/src/redux/selectors.js
+++ b/src/redux/selectors.js
@@ -33,7 +33,7 @@ export function getUrl(state) {
const query = getSearchQuery(state);
if (hash) {
// TODO: Add a human readable version
- return `/skin/${hash}/${Utils.filenameFromHash(hash)}`;
+ return Utils.getPermalinkUrlFromHash(hash);
} else if (query) {
return `/?query=${encodeURIComponent(query)}`;
}
diff --git a/src/utils.js b/src/utils.js
index b96448f6..eff39915 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -11,6 +11,11 @@ export function filenameFromHash(hash) {
export function skinUrlFromHash(hash) {
return `https://s3.amazonaws.com/webamp-uploaded-skins/skins/${hash}.wsz`;
}
+
+export function getPermalinkUrlFromHash(hash) {
+ return `/skin/${hash}/${filenameFromHash(hash)}/`;
+}
+
export function getWindowSize() {
var w = window,
d = document,