super_settings 2.3.1 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/ARCHITECTURE.md +0 -0
  3. data/CHANGELOG.md +16 -0
  4. data/README.md +6 -2
  5. data/VERSION +1 -1
  6. data/lib/super_settings/application/helper.rb +14 -0
  7. data/lib/super_settings/application/index.html.erb +95 -98
  8. data/lib/super_settings/application/layout.html.erb +1 -1
  9. data/lib/super_settings/application/scripts.js +177 -139
  10. data/lib/super_settings/application/style_vars.css.erb +22 -4
  11. data/lib/super_settings/application/styles.css +294 -75
  12. data/lib/super_settings/application.rb +1 -1
  13. data/lib/super_settings/coerce.rb +1 -0
  14. data/lib/super_settings/context/current.rb +23 -0
  15. data/lib/super_settings/context.rb +3 -0
  16. data/lib/super_settings/local_cache.rb +14 -0
  17. data/lib/super_settings/rack_application.rb +3 -1
  18. data/lib/super_settings/rest_api.rb +22 -3
  19. data/lib/super_settings/setting.rb +4 -0
  20. data/lib/super_settings/storage/http_storage.rb +2 -4
  21. data/lib/super_settings/storage/redis_storage.rb +3 -0
  22. data/lib/super_settings/storage/test_storage.rb +1 -0
  23. data/lib/super_settings/time_precision.rb +18 -0
  24. data/lib/super_settings.rb +3 -1
  25. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a8062539b6606b9cd5d043cfe7ec52abfe7a49a13edb59fbd8a9660831282c89
4
- data.tar.gz: 5bd8d1a568fc9828f0a3c1d57d2efda2109ffebf7ecbe5ba55d8ba1c01e1f57c
3
+ metadata.gz: e851110a7e8ebb10348b536a94121aab3c6657ef7c8115f3de6fd7adcd5f1a3b
4
+ data.tar.gz: 3aa309b399ee775cf5427d5e14a0b3f143e3ba0b441da4bcf41708f7806e2c17
5
5
  SHA512:
6
- metadata.gz: e0a64b3993479ec0f0e94ba362e9dba51dd2ca44d2da8ec09c29f2e0a67bbcae4393352846de727cd21c31eab244304edf8847d2d922acd583cc6f4dc9ebc482
7
- data.tar.gz: 65952c3cecf4ef4c97ff4d84e0a6d49ee4515260551c6941dbe8eeaf894bf3a0d21c922ed8d6afb8431680556c39771de93656de31f1f7c8fa2ef4dd5b84f3ef
6
+ metadata.gz: 79ba25dcd135459a8a5332aac5c4807fb04a183e573ae761ecd76b4b079d1772895fc2917ac2fe2c26e723193020eb43dbbb50d672dfb4f9d5e89ecd4d3a3c29
7
+ data.tar.gz: 6190dca1e68e103c982696ab7075a20e39a32e4ab5cf68d213cb679e552c475feb61d4ed111d151392a1f37010c42e3b69810ebeb7d6de5ee9a46239ca1ffbdf
data/ARCHITECTURE.md ADDED
File without changes
data/CHANGELOG.md CHANGED
@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file.
4
4
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5
5
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6
6
 
7
+ ## 2.4.1
8
+
9
+ ### Added
10
+
11
+ - Incoming links to the web UI now support specifying a description for the setting being edited by passing `description=description_text` in the URL hash. For example, `#edit=port&type=integer&description=Port%20number%20for%20the%20server` will open the setting with the key `port` for editing as an integer and pre-fill the description field.
12
+
13
+ ## 2.4.0
14
+
15
+ ### Added
16
+
17
+ - Incoming links to the web UI now support specifying the value type for the setting being edited by passing `type=value_type` in the URL hash. For example, `#edit=port&type=integer` will open the setting with the key `port` for editing as an integer.
18
+
19
+ ### Changed
20
+
21
+ - Web UI significantly updated to be cleaner and more modern using responsive design instead of tables.
22
+
7
23
  ## 2.3.1
8
24
 
9
25
  ### Fixed
data/README.md CHANGED
@@ -179,12 +179,16 @@ bin/start_rails
179
179
 
180
180
  Then go to http://localhost:3000/settings in your browser.
181
181
 
182
- You can change the layout used by the Web UI. However, if you do this, you will be responsible for providing the CSS styles for the buttons, table rows, and form controls. The CSS class names used by the default layout are compatible with the class names defined in the [Bootstrap library](https://getbootstrap.com/).
183
-
184
182
  It is not required to use the bundled Web UI. You can implement your own UI using the `SuperSettings::Setting` model.
185
183
 
186
184
  You can link directly to editing a setting by passing `#edit=key` in the URL hash. This will open the Web UI with the setting with the key `key` selected for editing.
187
185
 
186
+ You can also add `type` and `description` as parameters in the URL hash to specify the values to pre-fill for the setting if it doesn't already exist. For example, `#edit=port&type=integer&description=Server+port+number` will open the setting with the key `port` for editing as an integer with the description filled in if it doesn't already exist. If the setting does exist, then the type and description will be ignored.
187
+
188
+ ```html
189
+ <a href="/settings#edit=port&type=integer&description=Server+port+number">Edit Port Setting</a>
190
+ ```
191
+
188
192
  #### REST API
189
193
 
190
194
  You can mount a REST API for exposing and managing the settings. This API is required for the Web UI and is mounted along with the Web UI. The REST interface is documented in the `SuperSettings::RestAPI` class.
data/VERSION CHANGED
@@ -1 +1 @@
1
- 2.3.1
1
+ 2.4.1
data/lib/super_settings/application/helper.rb CHANGED
@@ -76,6 +76,10 @@ module SuperSettings
76
76
 
77
77
  # Render an image tag for one of the SVG images in the images directory. If the :color option
78
78
  # is specified, it will be applied to the SVG image.
79
+ #
80
+ # @param name [String] the name of the icon to render
81
+ # @param options [Hash] options for the icon (style, color, etc.)
82
+ # @return [String] the HTML for the icon
79
83
  def icon_image(name, options = {})
80
84
  svg = ICON_SVG[name.to_s]
81
85
  style = (options[:style] || {})
@@ -91,6 +95,16 @@ module SuperSettings
91
95
  end
92
96
 
93
97
  # Render an icon image as a link tag.
98
+ #
99
+ # @param icon [String] the name of the icon to render
100
+ # @param title [String] the title/tooltip for the button
101
+ # @param color [String] the color for the icon
102
+ # @param js_class [String] CSS class for JavaScript behavior
103
+ # @param url [String] the URL for the link (optional)
104
+ # @param disabled [Boolean] whether the button is disabled
105
+ # @param style [Hash] CSS styles for the icon
106
+ # @param link_style [String] CSS styles for the link
107
+ # @return [String] the HTML for the icon button
94
108
  def icon_button(icon, title:, color:, js_class:, url: nil, disabled: false, style: {}, link_style: nil)
95
109
  url = "#" if Coerce.blank?(url)
96
110
  image = icon_image(icon, alt: title, style: ICON_BUTTON_STYLE.merge(style).merge(color: color))
data/lib/super_settings/application/index.html.erb CHANGED
@@ -21,35 +21,29 @@
21
21
  <strong class="js-flash" style="display:none; margin-left:3rem;"></strong>
22
22
  </div>
23
23
 
24
- <table class="super-settings-table super-settings-table-striped" id="settings-table">
25
- <thead>
26
- <tr>
27
- <th scope="col" class="super-settings-key">
28
- Key
29
- <button class="super-settings-sort-control super-settings-btn-no-chrome" data-field="key" data-order="asc" data-selected="true" title="Sort by key">
30
- <%= icon_image("arrow-down-short", data: {order: :asc}, style: {display: "inline-block"}) %>
31
- <%= icon_image("arrow-up-short", data: {order: :desc}, style: {display: "none"}) %>
32
- </button>
33
- </th>
34
- <th scope="col" class="super-settings-value">Value</th>
35
- <th scope="col" class="super-settings-value-type">Type</th>
36
- <th scope="col" class="super-settings-description">Description</th>
37
- <th scope="col" data-field="updated_at">
38
- Modified
39
- <button class="super-settings-sort-control super-settings-btn-no-chrome" data-field="updated_at" data-order="asc" title="Sort by modified time">
40
- <%= icon_image("arrow-down-short", data: {order: :asc}, style: {display: "inline-block"}) %>
41
- <%= icon_image("arrow-up-short", data: {order: :desc}, style: {display: "none"}) %>
42
- </button>
43
- </th>
44
- <th scope="col" class="super-settings-controls"><span class="super-settings-sr-only">Controls</span></th>
45
- </tr>
46
- </thead>
47
- <tbody translate="no">
48
- </tbody>
49
- </table>
24
+ <div class="super-settings-sort-controls">
25
+ <span class="super-settings-sort-label">Sort by:</span>
26
+ <button class="super-settings-sort-control super-settings-btn-no-chrome" data-field="key" data-order="asc" data-selected="true" title="Sort by key">
27
+ Key
28
+ <%= icon_image("arrow-down-short", data: {order: :asc}, style: {display: "inline-block"}) %>
29
+ <%= icon_image("arrow-up-short", data: {order: :desc}, style: {display: "none"}) %>
30
+ </button>
31
+ <span></span>
32
+ <span></span>
33
+ <span></span>
34
+ <button class="super-settings-sort-control super-settings-btn-no-chrome" data-field="updated_at" data-order="asc" title="Sort by modified time">
35
+ Modified
36
+ <%= icon_image("arrow-down-short", data: {order: :asc}, style: {display: "inline-block"}) %>
37
+ <%= icon_image("arrow-up-short", data: {order: :desc}, style: {display: "none"}) %>
38
+ </button>
39
+ <span></span>
40
+ </div>
41
+
42
+ <div class="super-settings-cards-container" id="settings-container" translate="no">
43
+ </div>
50
44
  </form>
51
45
 
52
- <div id="super-settings-modal" class="super-settings-modal js-close-modal" aria-hidden="true" aria-role="dialog">
46
+ <div id="super-settings-modal" class="super-settings-modal js-close-modal" aria-hidden="true" role="dialog">
53
47
  <div class="super-settings-modal-dialog">
54
48
  <button type="button" title="Close Dialog" class="super-settings-modal-close super-settings-btn-no-chrome js-close-modal">&times;</button>
55
49
  <div class="super-settings-modal-content">
@@ -58,81 +52,86 @@
58
52
  </div>
59
53
  </main>
60
54
 
61
- <template id="setting-row-template" style="display:none;">
62
- <tr>
63
- <td class="super-settings-key">
64
- <div class="js-value-placeholder"></div>
65
- <input type="hidden" value="" name="settings[{{id}}][key]" class="js-setting-key">
66
- <input type="hidden" value="" name="settings[{{id}}][delete]" class="js-setting-deleted">
67
- </td>
68
-
69
- <td class="super-settings-value">
70
- <div class="js-value-placeholder super-settings-max-height-text"></div>
71
- </td>
72
-
73
- <td class="super-settings-value-type">
74
- <div class="js-value-placeholder"></div>
75
- </td>
76
-
77
- <td class="super-settings-description">
78
- <div class="js-value-placeholder super-settings-max-height-text"></div>
79
- </td>
80
-
81
- <td class="super-settings-last-modified super-settings-text-nowrap">
82
- <div class="js-value-placeholder"></div>
83
- </td>
84
-
85
- <td class="super-settings-controls">
86
- <%= icon_button("info-circle", title: "Setting Info", color: "#0d7ff0", js_class: "js-show-history") %>
87
- <%= icon_button("pencil-square", title: "Edit Setting", color: "#0c8024", js_class: "js-edit-setting") %>
88
- <%= icon_button("trash3", title: "Remove Setting", color: "#dc3545", js_class: "js-remove-setting") %>
89
- <%= icon_button("x-circle", title: "Cancel Changes", color: "#dc3545", js_class: "js-restore-setting", link_style: "display:none;") %>
90
- </td>
91
- </tr>
92
- </template>
55
+ <template id="setting-card-template" style="display:none;">
56
+ <div class="super-settings-card">
57
+ <div class="super-settings-card-content">
58
+ <div class="super-settings-key super-settings-card-key">
59
+ <label class="super-settings-card-label">Key:</label>
60
+ <span class="js-value-placeholder"></span>
61
+ <input type="hidden" value="" name="settings[{{id}}][key]" class="js-setting-key">
62
+ <input type="hidden" value="" name="settings[{{id}}][delete]" class="js-setting-deleted">
63
+ </div>
93
64
 
94
- <template id="setting-row-edit-template" style="display:none;">
95
- <tr data-edited="true" class="super-settings-edit-row">
96
- <td class="super-settings-key">
97
- <div>
98
- <label for="settings_{{id}}_key" class="super-settings-sr-only">Key</label>
99
- <input type="text" id="settings_{{id}}_key" name="settings[{{id}}][key]" value="" maxlength="190" class="super-settings-form-control js-setting-key" required>
65
+ <div class="super-settings-card-value">
66
+ <label class="super-settings-card-label">Value:</label>
67
+ <div class="js-value-placeholder super-settings-max-height-text"></div>
100
68
  </div>
101
- </td>
102
69
 
103
- <td class="super-settings-value">
104
- <div>
105
- <label for="settings_{{id}}_value" class="super-settings-sr-only">Value</label>
70
+ <div class="super-settings-card-type">
71
+ <label class="super-settings-card-label">Type:</label>
106
72
  <span class="js-value-placeholder"></span>
107
73
  </div>
108
- <div class="super-settings-container super-settings-text-danger js-setting-errors" style="display:none;">
74
+
75
+ <div class="super-settings-card-description">
76
+ <label class="super-settings-card-label">Description:</label>
77
+ <div class="js-value-placeholder super-settings-max-height-text"></div>
78
+ </div>
79
+
80
+ <div class="super-settings-card-modified">
81
+ <label class="super-settings-card-label">Modified:</label>
82
+ <span class="js-value-placeholder"></span>
109
83
  </div>
110
- </td>
111
84
 
112
- <td class="super-settings-value-type">
113
- <div>
114
- <label for="settings_{{id}}_value_type" class="super-settings-sr-only">Value Type</label>
85
+ <div class="super-settings-card-controls">
86
+ <%= icon_button("info-circle", title: "Setting Info", color: "var(--icon-info-color)", js_class: "js-show-history") %>
87
+ <%= icon_button("pencil-square", title: "Edit Setting", color: "var(--icon-edit-color)", js_class: "js-edit-setting") %>
88
+ <%= icon_button("trash3", title: "Remove Setting", color: "var(--icon-delete-color)", js_class: "js-remove-setting") %>
89
+ <%= icon_button("x-circle", title: "Cancel Changes", color: "var(--icon-cancel-color)", js_class: "js-restore-setting", link_style: "display:none;") %>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </template>
94
+
95
+ <template id="setting-card-edit-template" style="display:none;">
96
+ <div class="super-settings-card super-settings-card-edit" data-edited="true">
97
+ <div class="super-settings-card-content">
98
+ <div class="super-settings-card-key">
99
+ <label for="settings_{{id}}_key" class="super-settings-card-label">Key:</label>
100
+ <input type="text" id="settings_{{id}}_key" name="settings[{{id}}][key]" value="" maxlength="190" class="super-settings-form-control js-setting-key" required placeholder="Setting key">
101
+ </div>
102
+
103
+ <div class="super-settings-card-value">
104
+ <label for="settings_{{id}}_value" class="super-settings-card-label">Value:</label>
105
+ <span class="js-value-placeholder"></span>
106
+ <div class="super-settings-container super-settings-text-danger js-setting-errors" style="display:none;">
107
+ </div>
108
+ </div>
109
+
110
+ <div class="super-settings-card-type">
111
+ <label for="settings_{{id}}_value_type" class="super-settings-card-label">Type:</label>
115
112
  <select name="settings[{{id}}][value_type]" class="super-settings-form-control js-setting-value-type" id="settings_{{id}}_value_type">
116
113
  <% SuperSettings::Setting::VALUE_TYPES.each do |value_type| %>
117
114
  <option value="<%= html_escape(value_type) %>"><%= html_escape(value_type) %></option>
118
115
  <% end %>
119
116
  </select>
120
117
  </div>
121
- </td>
122
118
 
123
- <td class="super-settings-description" colspan="2">
124
- <div>
125
- <label for="settings_{{id}}_description" class="super-settings-sr-only">Description</label>
126
- <textarea id="settings_{{id}}_description" name="settings[{{id}}][description]" value="" class="super-settings-form-control" rows="4"></textarea>
119
+ <div class="super-settings-card-description">
120
+ <label for="settings_{{id}}_description" class="super-settings-card-label">Description:</label>
121
+ <textarea id="settings_{{id}}_description" name="settings[{{id}}][description]" value="" class="super-settings-form-control" rows="3" placeholder="Description of this setting"></textarea>
122
+ </div>
123
+
124
+ <div class="super-settings-card-modified">
125
+ <!-- Empty for edit mode -->
127
126
  </div>
128
- </td>
129
-
130
- <td class="super-settings-controls">
131
- <%= icon_button("info-circle", title: "Setting Info", color: "#0d7ff0", js_class: "js-show-history") %>
132
- <%= icon_button("pencil-square", title: "Edit Setting", color: "#c0c0c0", js_class: "js-no-op", disabled: true) %>
133
- <%= icon_button("x-circle", title: "Cancel Changes", color: "#dc3545", js_class: "js-restore-setting") %>
134
- </td>
135
- </tr>
127
+
128
+ <div class="super-settings-card-controls">
129
+ <%= icon_button("info-circle", title: "Setting Info", color: "var(--icon-info-color)", js_class: "js-show-history") %>
130
+ <%= icon_button("pencil-square", title: "Edit Setting", color: "var(--icon-disabled-color)", js_class: "js-no-op", disabled: true) %>
131
+ <%= icon_button("x-circle", title: "Cancel Changes", color: "var(--icon-cancel-color)", js_class: "js-restore-setting") %>
132
+ </div>
133
+ </div>
134
+ </div>
136
135
  </template>
137
136
 
138
137
  <template id="setting-value-field-template" style="display:none;">
@@ -170,17 +169,15 @@
170
169
 
171
170
  <template id="setting-history-table" style="display:none">
172
171
  <h3>Setting History: <span class="super-settings-history-key"></span></h3>
173
- <table class="super-settings-table super-settings-table-striped" id="super-settings-history">
174
- <thead>
175
- <tr>
176
- <th scope="col" class="super-settings-text-nowrap">Time</th>
177
- <th scope="col">Changed By</th>
178
- <th scope="col">Value</th>
179
- </tr>
180
- </thead>
181
- <tbody>
182
- </tbody>
183
- </table>
172
+ <div class="super-settings-history-container">
173
+ <div class="super-settings-history-header">
174
+ <div class="super-settings-history-time">Time</div>
175
+ <div class="super-settings-history-user">Changed By</div>
176
+ <div class="super-settings-history-value">Value</div>
177
+ </div>
178
+ <div class="super-settings-history-items" id="super-settings-history">
179
+ </div>
180
+ </div>
184
181
  </template>
185
182
 
186
183
  <%= javascript_tag %>
data/lib/super_settings/application/layout.html.erb CHANGED
@@ -4,7 +4,7 @@
4
4
  <title><%= application_name %> Settings</title>
5
5
  <meta charset="utf-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <meta name="pinterest" content="nopin" />
7
+ <meta name="pinterest" content="nopin">
8
8
  <meta name="format-detection" content="telephone=no email=no date=no address=no">
9
9
  <meta name="robots" content="noindex, nofollow">
10
10
  <meta name="referrer" content="no-referrer-when-downgrade">