From a5973c17e3bd1e116be1187ccc5138fa5cc4cda1 Mon Sep 17 00:00:00 2001
From: Jonathan Wilkes <jon.w.wilkes@gmail.com>
Date: Sun, 6 Mar 2016 23:20:03 -0500
Subject: [PATCH] add ios-style dsp toggle
---
pd/nw/css/default.css | 103 ++++++++++++++++++++++++++++++++++++++++++
pd/nw/index.html | 6 ++-
2 files changed, 107 insertions(+), 2 deletions(-)
diff --git a/pd/nw/css/default.css b/pd/nw/css/default.css
index 86feb1398..8e861bc73 100644
--- a/pd/nw/css/default.css
+++ b/pd/nw/css/default.css
@@ -32,6 +32,109 @@
#control_frame {
padding: 12px;
+ transform: translate(20, -10);
+}
+
+/* The DSP toggle */
+
+.dsp_toggle {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ tap-highlight-color: transparent;
+}
+
+.dsp_toggle input {
+ opacity: 0;
+ position: absolute;
+}
+
+.dsp_toggle input + span {
+ position: relative;
+ display: inline-block;
+ width: 1.65em;
+ height: 1em;
+ background: white;
+ box-shadow: inset 0 0 0 0.0625em #e9e9e9;
+ border-radius: 0.5em;
+ vertical-align: -0.15em;
+ transition: all 0.40s cubic-bezier(.17,.67,.43,.98);
+}
+
+.dsp_toggle:active input + span,
+.dsp_toggle input + span:active {
+ box-shadow: inset 0 0 0 0.73em #e9e9e9;
+}
+
+.dsp_toggle input + span:after {
+ position: absolute;
+ display: block;
+ content: '';
+ width: 0.875em;
+ height: 0.875em;
+ border-radius: 0.4375em;
+ top: 0.0625em;
+ left: 0.0625em;
+ background: white;
+ box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
+ 0 0 0.05em rgba(0,0,0,0.05),
+ 0 0.1em 0.2em rgba(0,0,0,0.2);
+ transition: all 0.25s ease-out;
+}
+
+.dsp_toggle:active input + span:after,
+.dsp_toggle input + span:active:after {
+ width: 1.15em;
+}
+
+.dsp_toggle input:checked + span {
+ box-shadow: inset 0 0 0 0.73em #4cd964;
+}
+
+.dsp_toggle input:checked + span:after {
+ left: 0.7125em;
+}
+
+.dsp_toggle:active input:checked + span:after,
+.dsp_toggle input:checked + span:active:after {
+ left: 0.4375em;
+}
+
+/* accessibility styles */
+.dsp_toggle input:focus + span:after {
+ box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.15),
+ 0 0 0.05em rgba(0,0,0,0.08),
+ 0 0.1em 0.2em rgba(0,0,0,0.3);
+ background: #fff;
+}
+
+.dsp_toggle input:focus + span {
+ box-shadow: inset 0 0 0 0.0625em #dadada;
+}
+
+.dsp_toggle input:focus:checked + span {
+ box-shadow: inset 0 0 0 0.73em #33be4b;
+}
+
+/* reset accessibility style on hover */
+.dsp_toggle:hover input:focus + span:after {
+ box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
+ 0 0 0.05em rgba(0,0,0,0.05),
+ 0 0.1em 0.2em rgba(0,0,0,0.2);
+ background: #fff;
+}
+
+.dsp_toggle:hover input:focus + span {
+ box-shadow: inset 0 0 0 0.0625em #e9e9e9;
+}
+
+.dsp_toggle:hover input:focus:checked + span {
+ box-shadow: inset 0 0 0 0.73em #4cd964;
}
#printout {
diff --git a/pd/nw/index.html b/pd/nw/index.html
index a5382b157..2bbfa5d05 100644
--- a/pd/nw/index.html
+++ b/pd/nw/index.html
@@ -12,8 +12,10 @@
</span>
<div id="console_controls" class="noselect">
<div id="control_frame">
- <label><input type="checkbox" id="dsp_control" name="dsp_control"
- value="on"/>Compute Audio
+ <label class="dsp_toggle">DSP
+ <input type="checkbox" id="dsp_control" name="dsp_control"
+ value="on"/>
+ <span></span>
</label>
</div>
</div>
--
GitLab