From 9800abe02202e18574e248930fb76b21f999df37 Mon Sep 17 00:00:00 2001
From: David Phillips <dbphillipsnz@gmail.com>
Date: Mon, 14 Mar 2016 14:34:26 +1300
Subject: Initial rough-up of power confirmation box

---
 cancel.png    | Bin 0 -> 1125 bytes
 index.html    |  26 ++++++++++++++++++++++-
 petrichor.css |  67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 petrichor.js  |  10 +++++++++
 reboot.png    | Bin 0 -> 3790 bytes
 shutdown.png  | Bin 0 -> 3477 bytes
 6 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 cancel.png
 create mode 100644 reboot.png
 create mode 100644 shutdown.png
diff --git a/cancel.png b/cancel.png
new file mode 100644
index 0000000..4d6a0ca
Binary files /dev/null and b/cancel.png differ
diff --git a/index.html b/index.html
index 5fa7934..689641b 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href="petrichor.css" />
+		<script src="old/mock.js" type="text/javascript"></script>
 		<script src="petrichor.js" type="text/javascript"></script>
 		<script type="text/javascript">
 			start();
@@ -20,7 +21,30 @@
 		<div id="message-container">
 			<span id="message-label"></span>
 		</div>
+		<a id="mask" href="#" onclick="hide_element('power-confirm');hide_element('mask');"></a>
+		<div id="power-confirm">
+			<ul>
+				<li>
+					<a class="button" href="#" onclick="lightdm.shutdown();">
+						<div class="icon" id="icon-shutdown"></div>
+						<span>Power off</span>
+					</a>
+				</li>
+				<li>
+					<a class="button" href="#" onclick="lightdm.restart();">
+						<div class="icon" id="icon-reboot"></div>
+						<span>Restart</span>
+					</a>
+				</li>
+				<li>
+					<a class="button" href="#" onclick="hide_element('power-confirm');hide_element('mask');">
+						<div class="icon" id="icon-cancel"></div>
+						<span>Cancel</span>
+					</a>
+				</li>
+			</ul>
+		</div>
 		<select id="session-list" class="ease-opacity"></select>
-		<img id="shutdown" class="ease-opacity" src="iec5009.svg" onclick="lightdm.shutdown();" />
+		<img id="shutdown" class="ease-opacity" src="iec5009.svg" onclick="show_element('power-confirm');show_element('mask');" />
 	</body>
 </html>
diff --git a/petrichor.css b/petrichor.css
index 72d1b6e..2e1d078 100644
--- a/petrichor.css
+++ b/petrichor.css
@@ -18,6 +18,71 @@ body,html
 	transition: opacity ease 0.3s;
 }
 
+#mask
+{
+	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	background-color: rgba(0,0,0,0.6);
+	visibility: hidden;
+	opacity: 0;
+}
+
+#power-confirm
+{
+	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
+	text-align: center;
+	height: 150px;
+	margin-top: -75px;
+	width: 100%;
+	position: absolute;
+	left: 0;
+	top: 50%;
+	visibility: hidden;
+	opacity: 0;
+}
+
+#power-confirm li
+{
+	list-style: none;
+	display: inline-block;
+	margin: 2em;
+}
+
+#power-confirm li a
+{
+	text-decoration: none;
+	color: inherit;
+	font-size: 1.5em;
+	display: inline-block;
+}
+
+#power-confirm li div
+{
+	display: block;
+	height: 96px;
+	width: 96px;
+	border-radius: 48px;
+}
+
+#icon-shutdown
+{
+	background: url('shutdown.png') #C33;
+}
+
+#icon-reboot
+{
+	background: url('reboot.png') #33C;
+}
+
+#icon-cancel
+{
+	background: url('cancel.png') #3C3;
+}
+
 #shutdown
 {
 	position: absolute;
@@ -106,7 +171,7 @@ a.user
 	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
 }
 
-#password-container.shown, #message-container.shown
+#password-container.shown, #message-container.shown, #mask.shown, #power-confirm.shown
 {
 	visibility: visible;
 	opacity: 1;
diff --git a/petrichor.js b/petrichor.js
index b5e06ed..fa4a100 100644
--- a/petrichor.js
+++ b/petrichor.js
@@ -2,6 +2,16 @@ password_prompt = false;
 selected_user = null;
 time_remaining = 0
 
+function show_element(id)
+{
+	document.getElementById(id).classList.add("shown");
+}
+
+function hide_element(id)
+{
+	document.getElementById(id).classList.remove("shown");
+}
+
 function show_prompt(text, type)
 {
 	password_prompt = true;
diff --git a/reboot.png b/reboot.png
new file mode 100644
index 0000000..52695ec
Binary files /dev/null and b/reboot.png differ
diff --git a/shutdown.png b/shutdown.png
new file mode 100644
index 0000000..d2a7b96
Binary files /dev/null and b/shutdown.png differ
-- 
cgit v1.1


From cfd46efffefcfd9c0e77edcc75b69f2709c22352 Mon Sep 17 00:00:00 2001
From: David Phillips <dbphillipsnz@gmail.com>
Date: Mon, 14 Mar 2016 15:03:06 +1300
Subject: Correct alignment of power confirm button box

---
 index.html    |  2 +-
 petrichor.css | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 689641b..67d8d7d 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
 			<span id="message-label"></span>
 		</div>
 		<a id="mask" href="#" onclick="hide_element('power-confirm');hide_element('mask');"></a>
-		<div id="power-confirm">
+		<div id="power-confirm" onclick="document.getElementById('mask').click();">
 			<ul>
 				<li>
 					<a class="button" href="#" onclick="lightdm.shutdown();">
diff --git a/petrichor.css b/petrichor.css
index 2e1d078..8954763 100644
--- a/petrichor.css
+++ b/petrichor.css
@@ -20,36 +20,40 @@ body,html
 
 #mask
 {
+	text-align: center;
 	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	right: 0px;
 	bottom: 0px;
-	background-color: rgba(0,0,0,0.6);
+	background-color: rgba(0,0,0,0.7);
 	visibility: hidden;
 	opacity: 0;
 }
 
 #power-confirm
 {
-	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
-	text-align: center;
-	height: 150px;
-	margin-top: -75px;
-	width: 100%;
 	position: absolute;
-	left: 0;
-	top: 50%;
+	left: 50%;
+	bottom: 50px;
 	visibility: hidden;
 	opacity: 0;
 }
 
+#power-confirm > ul
+{
+	display: inline-block;
+	margin: 0px 0px 0px -50%;
+}
+
 #power-confirm li
 {
+	text-align: center;
 	list-style: none;
 	display: inline-block;
-	margin: 2em;
+	margin-left: 2em;
+	margin-right: 2em;
 }
 
 #power-confirm li a
-- 
cgit v1.1


From 6d0e67aa99d7fba5539cb90aa711cd92a016a87a Mon Sep 17 00:00:00 2001
From: David Phillips <dbphillipsnz@gmail.com>
Date: Mon, 14 Mar 2016 15:18:25 +1300
Subject: Remove mock.js from index.html

---
 index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/index.html b/index.html
index 67d8d7d..e063587 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,6 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href="petrichor.css" />
-		<script src="old/mock.js" type="text/javascript"></script>
 		<script src="petrichor.js" type="text/javascript"></script>
 		<script type="text/javascript">
 			start();
-- 
cgit v1.1


From b0911b7b5556bfe621b6d42b51533c2264bae0f8 Mon Sep 17 00:00:00 2001
From: David Phillips <dbphillipsnz@gmail.com>
Date: Mon, 14 Mar 2016 15:20:51 +1300
Subject: Move icon images to common directory

---
 cancel.png         | Bin 1125 -> 0 bytes
 image/cancel.png   | Bin 0 -> 1125 bytes
 image/reboot.png   | Bin 0 -> 3790 bytes
 image/shutdown.png | Bin 0 -> 3477 bytes
 petrichor.css      |   6 +++---
 reboot.png         | Bin 3790 -> 0 bytes
 shutdown.png       | Bin 3477 -> 0 bytes
 7 files changed, 3 insertions(+), 3 deletions(-)
 delete mode 100644 cancel.png
 create mode 100644 image/cancel.png
 create mode 100644 image/reboot.png
 create mode 100644 image/shutdown.png
 delete mode 100644 reboot.png
 delete mode 100644 shutdown.png

diff --git a/cancel.png b/cancel.png
deleted file mode 100644
index 4d6a0ca..0000000
Binary files a/cancel.png and /dev/null differ
diff --git a/image/cancel.png b/image/cancel.png
new file mode 100644
index 0000000..4d6a0ca
Binary files /dev/null and b/image/cancel.png differ
diff --git a/image/reboot.png b/image/reboot.png
new file mode 100644
index 0000000..52695ec
Binary files /dev/null and b/image/reboot.png differ
diff --git a/image/shutdown.png b/image/shutdown.png
new file mode 100644
index 0000000..d2a7b96
Binary files /dev/null and b/image/shutdown.png differ
diff --git a/petrichor.css b/petrichor.css
index 8954763..c752ff0 100644
--- a/petrichor.css
+++ b/petrichor.css
@@ -74,17 +74,17 @@ body,html
 
 #icon-shutdown
 {
-	background: url('shutdown.png') #C33;
+	background: url('image/shutdown.png') #C33;
 }
 
 #icon-reboot
 {
-	background: url('reboot.png') #33C;
+	background: url('image/reboot.png') #33C;
 }
 
 #icon-cancel
 {
-	background: url('cancel.png') #3C3;
+	background: url('image/cancel.png') #3C3;
 }
 
 #shutdown
diff --git a/reboot.png b/reboot.png
deleted file mode 100644
index 52695ec..0000000
Binary files a/reboot.png and /dev/null differ
diff --git a/shutdown.png b/shutdown.png
deleted file mode 100644
index d2a7b96..0000000
Binary files a/shutdown.png and /dev/null differ
-- 
cgit v1.1

