super_settings 0.0.0.rc1

data/lib/super_settings/application/images/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

data/lib/super_settings/application/images/slash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slash"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>

data/lib/super_settings/application/images/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>

data/lib/super_settings/application/index.html.erb

@@ -0,0 +1,169 @@
+<%= style_tag %>
+
+<main>
+  <form class="form-inline" style="display:block;" onsubmit="return false">
+    <div class="super-settings-sticky-top">
+      <span class="js-settings-count" style="display:inline-block; margin-right:1rem;"></span>
+
+      <label for="filter" class="super-settings-sr-only">Filter</label>
+      <input type="text" name="filter" value="" placeholder="Filter Keys" size="20" class="form-control" title="Filter Keys" id="filter" style="margin-right:1rem;">
+
+      <button type="button" class="btn btn-default" id="add-setting"><%= icon_image(:plus) %> Add Setting</button>
+
+      <button type="button" class="btn btn-default" id="discard-changes" disabled>
+        Discard Changes
+      </button>
+
+      <button type="button" class="btn btn-primary" id="save-settings" disabled>
+        Save <span class="count"></span> Changes
+      </button>
+
+      <strong class="js-flash" style="display:none; margin-left:3rem;"></strong>
+    </div>
+
+    <table class="table table-striped" id="settings-table">
+      <thead>
+        <tr>
+          <th scope="col" class="super-settings-key">Key</th>
+          <th scope="col" class="super-settings-value">Value</th>
+          <th scope="col" class="super-settings-value-type">Type</th>
+          <th scope="col" class="super-settings-description">Description</th>
+          <th scope="col" class="super-settings-controls"><span class="super-settings-sr-only">Controls</span></th>
+        </tr>
+      </thead>
+      <tbody translate="no">
+      </tbody>
+    </table>
+  </form>
+</main>
+
+<div id="modal" class="super-settings-modal js-close-modal" aria-hidden="true" aria-role="dialog">
+  <div class="super-settings-modal-dialog">
+    <button type="button" title="Close Dialog" class="super-settings-modal-close js-close-modal">&times;</button>
+    <div class="super-settings-modal-content">
+    </div>
+  </div>
+</div>
+
+<template id="setting-row-template" style="display:none;">
+  <tr>
+    <td class="super-settings-key">
+      <div class="js-value-placeholder"></div>
+      <input type="hidden" value="" name="settings[{{id}}][key]" class="js-setting-key">
+      <input type="hidden" value="" name="settings[{{id}}][delete]" class="js-setting-deleted">
+    </td>
+
+    <td class="super-settings-value">
+      <div class="js-value-placeholder"></div>
+    </td>
+
+    <td class="super-settings-value-type">
+      <div class="js-value-placeholder"></div>
+    </td>
+
+    <td class="super-settings-description">
+      <div class="js-value-placeholder"></div>
+    </td>
+
+    <td class="super-settings-controls">
+      <%= icon_button(:info, title: "Setting Info", color: "royalblue", js_class: "js-show-history") %>
+      <%= icon_button(:edit, title: "Edit Setting", color: "green", js_class: "js-edit-setting") %>
+      <%= icon_button(:trash, title: "Remove Setting", color: "firebrick", js_class: "js-remove-setting") %>
+      <%= icon_button(:slash, title: "Cancel Changes", color: "firebrick", js_class: "js-restore-setting", link_style: "display:none;") %>
+    </td>
+  </tr>
+</template>
+
+<template id="setting-row-edit-template" style="display:none;">
+  <tr data-edited="true" class="super-settings-edit-row">
+    <td class="super-settings-key">
+      <div>
+        <label for="settings_{{id}}_key" class="super-settings-sr-only">Key</label>
+        <input type="text" id="settings_{{id}}_key" name="settings[{{id}}][key]" value="" maxlength="190" class="form-control js-setting-key" required>
+      </div>
+    </td>
+
+    <td class="super-settings-value">
+      <div>
+        <label for="settings_{{id}}_value" class="super-settings-sr-only">Value</label>
+        <span class="js-value-placeholder"></span>
+      </div>
+      <div class="container text-danger js-setting-errors" style="display:none;">
+      </div>
+    </td>
+
+    <td class="super-settings-value-type">
+      <div>
+        <label for="settings_{{id}}_value_type" class="super-settings-sr-only">Value Type</label>
+        <select name="settings[{{id}}][value_type]" class="form-control js-setting-value-type" id="settings_{{id}}_value_type">
+          <% SuperSettings::Setting::VALUE_TYPES.each do |value_type| %>
+            <option value="<%= ERB::Util.html_escape(value_type) %>"><%= ERB::Util.html_escape(value_type) %></option>
+          <% end %>
+        </select>
+      </div>
+    </td>
+
+    <td class="super-settings-description">
+      <div>
+        <label for="settings_{{id}}_description" class="super-settings-sr-only">Description</label>
+        <textarea id="settings_{{id}}_description" name="settings[{{id}}][description]" value="" class="form-control" rows="4"></textarea>
+      </div>
+    </td>
+
+    <td class="super-settings-controls">
+      <%= icon_button(:info, title: "Setting Info", color: "royalblue", js_class: "js-show-history") %>
+      <%= icon_button(:edit, title: "Edit Setting", color: "gray", js_class: "js-no-op", disabled: true) %>
+      <%= icon_button(:slash, title: "Cancel Changes", color: "firebrick", js_class: "js-restore-setting") %>
+    </td>
+  </tr>
+</template>
+
+<template id="setting-value-field-template" style="display:none;">
+  <textarea id="settings_{{id}}_value" name="settings[{{id}}][value]" class="form-control js-setting-value" rows="4"></textarea>
+</template>
+
+<template id="setting-value-field-integer-template" style="display:none;">
+  <input type="number" step="1" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="form-control js-setting-value">
+</template>
+
+<template id="setting-value-field-float-template" style="display:none;">
+  <input type="number" step="any" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="form-control js-setting-value">
+</template>
+
+<template id="setting-value-field-datetime-template" style="display:none;">
+  <span>
+    <input type="date" id="settings_{{id}}_value" name="_settings[{{id}}][date]" value="" class="form-control js-date-input">
+    <label for="settings_{{id}}_value_time" class="super-settings-sr-only">Time</label>
+    <input type="time" id="settings_{{id}}_value_time" name="_settings[{{id}}][time]" value="" class="form-control js-time-input" aria-label="Time">
+    <input type="hidden" name="settings[{{id}}][value]" value="" class="js-setting-value">
+    <small class="text-muted">Time in UTC</small>
+  </span>
+</template>
+
+<template id="setting-value-field-boolean-template" style="display:none;">
+  <span class="form-check">
+    <input type="checkbox" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="true" class="js-setting-value">
+    <label for="settings_{{id}}_value">Enabled</label>
+  </span>
+</template>
+
+<template id="setting-value-field-array-template" style="display:none;">
+  <textarea id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="form-control js-setting-value" rows="8" placeholder="one entry per line"></textarea>
+</template>
+
+<template id="setting-history-table" style="display:none">
+  <h3>Setting History: <span class="super-settings-history-key"></span></h3>
+  <table class="table table-striped" id="super-settings-history">
+    <thead>
+      <tr>
+        <th scope="col" class="super-settings-text-nowrap">Time</th>
+        <th scope="col">Changed By</th>
+        <th scope="col">Value</th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+</template>
+
+<%= javascript_tag %>

data/lib/super_settings/application/layout.html.erb

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title><%= application_name %> Settings</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="pinterest" content="nopin" />
+    <meta name="format-detection" content="telephone=no">
+    <%= layout_style_tag %>
+    <%= add_to_head %>
+  </head>
+
+  <body class="super_settings">
+    <header>
+      <h1 class="logo">
+        <%= application_header %>
+      </h1>
+    </header>
+    <div class="container">
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/lib/super_settings/application/layout_styles.css

@@ -0,0 +1,193 @@
+* {box-sizing:border-box;}
+
+body {
+  font-family: sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: left;
+  color: #212529;
+  background-color: #ffffff;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background-color: #666;
+  color: white;
+  padding: 1rem;
+}
+
+header h1.logo {
+  font-size: 20px;
+  margin: 0;
+}
+
+header h1.logo a {
+  color: #ffffff;
+  text-decoration: none;
+}
+header h1.logo a:visited {
+  color: #ffffff;
+}
+
+header h1.logo img {
+  max-height: 3rem;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.container {
+  padding-left: 15px;
+  padding-right: 15px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+a {
+  text-decoration: none;
+  color: #369;
+}
+
+a:visited {
+  color: #369;n
+}
+
+.btn {
+	box-shadow:inset 0px 1px 0px 0px #ffffff;
+	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
+	background-color:#f9f9f9;
+	border-radius:6px;
+	border:1px solid #dcdcdc;
+	display:inline-block;
+	color:#666666;
+	font-family:Arial;
+	font-size:15px;
+	font-weight:bold;
+	padding:9px 16px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #ffffff;
+  vertical-align: middle;
+}
+.btn:hover {
+	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
+	background-color:#e9e9e9;
+}
+.btn:active {
+	position:relative;
+	top:1px;
+}
+.btn:disabled {
+	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
+	background-color:#f9f9f9;
+  opacity: 0.65;
+  box-shadow: none;
+}
+
+.btn-primary {
+	box-shadow:inset 0px 1px 0px 0px #9fb4f2;
+	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
+	background-color:#7892c2;
+	color:#ffffff;
+	text-shadow:0px 1px 0px #283966;
+}
+.btn-primary:hover {
+	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
+	background-color:#476e9e;
+}
+.btn-primary:disabled {
+	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
+	background-color:#7892c2;
+}
+
+.btn:not(:disabled) {
+  cursor: pointer;
+}
+.btn:disabled {
+  opacity: .65;
+}
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1rem;
+  border-collapse: collapse;
+}
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dee2e6;
+}
+
+.table td, .table th {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, .05);
+}
+
+textarea {
+  font-family: inherit;
+  margin: 0;
+  overflow: auto;
+  resize: vertical;
+}
+
+.form-control {
+  font-family: inherit;
+  margin: 0;
+  overflow: visible;
+  display: block;
+  width: 100%;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+select.form-control:not([size]):not([multiple]) {
+  height: calc(2.25rem + 2px);
+}
+
+.form-check {
+  margin-top: .5rem;
+  display: inline-block;
+}
+
+.form-check input[type=checkbox] {
+  vertical-align: middle;
+}
+
+.form-inline {
+  display: inline-block;
+}
+
+.form-inline .form-control {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+
+.text-success {
+  color: green !important;
+}
+
+.text-danger {
+  color: firebrick !important;
+}
+
+.text-muted {
+  color: #666 !important;
+}