[sysconfig] Add screensaver customization module

2 files changed, 225 insertions, 0 deletions

diff --git a/modules-available/sysconfig/templates/screensaver-start.html b/modules-available/sysconfig/templates/screensaver-start.html
new file mode 100644
index 00000000..e3f55c63
--- /dev/null
+++ b/modules-available/sysconfig/templates/screensaver-start.html
@@ -0,0 +1,122 @@
+<form role="form" enctype="multipart/form-data" method="post" action="?do=SysConfig&amp;action=addmodule&amp;step={{step}}">
+	<input type="hidden" name="token" value="{{token}}">
+	<input type="hidden" name="next" value="{{next}}">
+	<input type="hidden" name="id" value="{{id}}">
+	<input type="hidden" name="edit" value="{{edit}}">
+
+	<div class="form-group">
+		<div class="input-group">
+			<span class="input-group-addon">{{lang_moduleName}}</span>
+			<input type="text" tabindex="1" name="title" value="{{title}}" class="form-control" autofocus required>
+		</div>
+	</div>
+
+	<input type="hidden" id="helper-mode" name="helper_mode" value="false">
+	<div class="form-group">
+		<div class="input-group btn-group">
+			<span class="input-group-addon">{{lang_mode}}</span>
+			<a class="btn btn-default" tabindex="2" id="btn-easy-mode" type="button" onclick="switchMode(1)">
+				<span class="glyphicon glyphicon-user"></span>
+				{{lang_modeEasy}}
+			</a>
+			<a class="btn btn-default active" tabindex="3" id="btn-advanced-mode" onclick="switchMode(0)">
+				<span class="glyphicon glyphicon-education"></span>
+				{{lang_modeAdvanced}}
+			</a>
+		</div>
+	</div>
+
+	<div class="form-group" id="advanced-mode">
+		<div class="input-group">
+			<span class="input-group-addon">{{lang_screenQss}}</span>
+			<textarea tabindex="4" name="qss" rows="20" class="form-control">{{qss}}</textarea>
+		</div>
+	</div>
+
+	<div id="easy-mode" hidden>
+		<div class="form-group">
+			<label>{{lang_screenBackground}}</label>
+			{{lang_screenBackgroundDescription}}
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenColor}} 1</span>
+				<input id="screensaver-background-color-1" tabindex="5" type="text" name="bg_color_1" value="" class="form-control" placeholder="#443">
+			</div>
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenColor}} 2</span>
+				<input id="screensaver-background-color-2" tabindex="6" type="text" name="bg_color_2" value="" class="form-control" placeholder="#000">
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label >{{lang_screenLabel}}</label>
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenColor}}</span>
+				<input type="text" tabindex="7" name="label_color" value="" class="form-control" placeholder="#f64">
+			</div>
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenSize}}</span>
+				<input type="number" tabindex="8" name="label_size" value="" class="form-control" placeholder="20">
+				<span class="input-group-addon">pt</span>
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label >{{lang_screenClock}}</label>
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenColor}}</span>
+				<input type="text" tabindex="9" name="clock_color" value="" class="form-control" placeholder="#999">
+			</div>
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenSize}}</span>
+				<input type="number" tabindex="10" name="clock_size" value="" class="form-control" placeholder="20">
+				<span class="input-group-addon">pt</span>
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label >{{lang_screenHeader}}</label>
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenColor}}</span>
+				<input type="text" tabindex="11" name="header_color" value="" class="form-control" placeholder="">
+			</div>
+			<div class="input-group">
+				<span class="input-group-addon slx-ga">{{lang_screenSize}}</span>
+				<input type="number" tabindex="12" name="header_size" value="" class="form-control" placeholder="20">
+				<span class="input-group-addon">pt</span>
+			</div>
+		</div>
+	</div>
+
+	<hr>
+	<div class="btn-group">
+		<a class="btn btn-default" id="btn-back" tabindex="5" onclick="window.history.back()">{{lang_back}}</a>
+	</div>
+	<div class="btn-group pull-right">
+		<button type="submit" id="btn-next" tabindex="6" class="btn btn-primary">{{lang_next}} &raquo;</button>
+	</div>
+	<div class="clearfix"></div>
+</form>
+
+<script type="text/javascript">
+	function switchMode(mode) {
+		// 0 = advanced mode
+		// 1 = easy mode
+		if (mode === 0) {
+			$('#easy-mode').hide();
+			$('#advanced-mode').show();
+			$('#btn-easy-mode').removeClass('active');
+			$('#btn-advanced-mode').addClass('active');
+			$('#helper-mode').val('false');
+			$('#btn-back').prop('tabindex', 5);
+			$('#btn-next').prop('tabindex', 6);
+		} else if (mode === 1) {
+			$('#advanced-mode').hide();
+			$('#easy-mode').show();
+			$('#btn-advanced-mode').removeClass('active');
+			$('#btn-easy-mode').addClass('active');
+			$('#helper-mode').val('true');
+			$('#btn-back').prop('tabindex', 13);
+			$('#btn-next').prop('tabindex', 14);
+		}
+	}
+</script>
diff --git a/modules-available/sysconfig/templates/screensaver-text.html b/modules-available/sysconfig/templates/screensaver-text.html
new file mode 100644
index 00000000..c6516b80
--- /dev/null
+++ b/modules-available/sysconfig/templates/screensaver-text.html
@@ -0,0 +1,103 @@
+<form role="form" enctype="multipart/form-data" method="post" action="?do=SysConfig&amp;action=addmodule&amp;step={{step}}">
+	<input type="hidden" name="token" value="{{token}}">
+	<input type="hidden" name="next" value="{{next}}">
+	<input type="hidden" name="id" value="{{id}}">
+	<input type="hidden" name="edit" value="{{edit}}">
+
+	<div class="form-group">
+		<h4><label>{{title}}</label></h4>
+		<h5>{{description}}</h5>
+
+		<h4>{{lang_screenUnlocked}}</h4>
+		<div class="input-group">
+			<span class="input-group-addon slx-ga3">{{lang_title}}</span>
+			<input type="text" tabindex="1" name="msg_value" value="{{msg_value}}" class="form-control">
+		</div>
+	</div>
+
+	<div class="form-group">
+		<span class="input-group-addon top-addon">{{lang_screenText}}</span>
+		<textarea class="form-control summernote" id ="text-id" tabindex="2" name="text_value" rows="5" cols="30">{{text_value}}</textarea>
+	</div>
+	<hr>
+	<h4>{{lang_screenLocked}}</h4>
+	<input type="hidden" id="inherit_locked" name="inherit_locked" value="{{inherit_locked}}">
+	<div class="form-group">
+		<div class="input-group btn-group">
+			<span class="input-group-addon">{{lang_screenTextInherit}}</span>
+			<a class="btn btn-default" id="btn-inherit-on" type="button" onclick="switchMode(true)">
+				<span class="glyphicon glyphicon-ok"></span>
+			</a>
+			<a class="btn btn-default active" id="btn-inherit-off" onclick="switchMode(false)">
+				<span class="glyphicon glyphicon-remove"></span>
+			</a>
+		</div>
+	</div>
+
+	<div class="form-group">
+		<div class="input-group">
+			<span class="input-group-addon slx-ga3">{{lang_title}}</span>
+			<input type="text" id="msg-locked-id" tabindex="3" name="msg_locked_value" value="{{msg_locked_value}}" class="form-control">
+		</div>
+	</div>
+
+	<div class="form-group">
+		<span class="input-group-addon top-addon">{{lang_screenText}}</span>
+		<textarea class="form-control summernote" id ="text-locked-id" tabindex="4" name="text_locked_value" rows="5" cols="30">{{text_locked_value}}</textarea>
+	</div>
+
+	<div class="btn-group">
+		<a class="btn btn-default" onclick="window.history.back()">{{lang_back}}</a>
+	</div>
+	<div class="btn-group pull-right">
+		<button type="submit" class="btn btn-primary">{{lang_next}} &raquo;</button>
+	</div>
+	<div class="clearfix"></div>
+</form>
+
+<script type="text/javascript">
+	document.addEventListener("DOMContentLoaded", function () {
+		switchMode({{inherit_locked}});
+	}, false);
+
+
+	function switchMode(mode) {
+		// true = inherit on
+		// false = inherit off
+		if (mode) {
+			$('#msg-locked-id').prop('disabled', true);
+			$('#text-locked-id').summernote('disable');
+			$('#btn-inherit-on').addClass('active');
+			$('#btn-inherit-off').removeClass('active');
+			$('#inherit_locked').val(true);
+		} else {
+			$('#msg-locked-id').prop('disabled', false);
+			$('#text-locked-id').summernote('enable');
+			$('#btn-inherit-on').removeClass('active');
+			$('#btn-inherit-off').addClass('active');
+			$('#inherit_locked').val(false);
+		}
+	}
+</script>
+
+<style>
+	.slx-ga3 {
+		min-width: 16em;
+		text-align: left;
+	}
+
+	.top-addon {
+		border-right: 1px solid #ccc !important;
+		border-top-right-radius: 4px !important;
+		border-bottom-left-radius: 0 !important;
+		border-bottom-right-radius: 0 !important;
+		border-bottom: 0 !important;
+	}
+
+	/* Used to override some summernote css to get a proper addon header */
+	.note-editor.note-frame {
+		border-color: #ccc !important;
+		border-top-left-radius: 0 !important;
+		border-top-right-radius: 0 !important;
+	}
+</style>
\ No newline at end of file