active_admin_datetimepicker 2.1.0 → 2.2.0
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.
- checksums.yaml +4 -4
- data/README.md +28 -0
- data/app/assets/stylesheets/active_admin_datetimepicker.scss +156 -0
- data/lib/active_admin_datetimepicker/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2fcbf5dabe33507c8eac39d407c1f3834daf47773d6d0ebd7aca2d77291d5401
|
|
4
|
+
data.tar.gz: 99facdae8b8ba1ed1f1c5b5be44a888899ccd71524bd735852726715457499f4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8d07649d493e428c8e922025f5374389e89e2340e52087bff17eb963dbb3b82e11f6989643924330410ebd767c29b32e1997d0fba73c90af7a889b5a0b613b61
|
|
7
|
+
data.tar.gz: b3505a963858aac440411d5e9a908e8d8290d75ecd353929112187f4e8ada1d688e28ad63e0a115f10793f7942b515f472ec35cf2c043cca23170233fa05ac00
|
data/README.md
CHANGED
|
@@ -118,6 +118,34 @@ ActiveAdminDatetimepicker::Base.format = "%d/%m/%Y %H:%M" # Ruby format
|
|
|
118
118
|
|
|
119
119
|
See [the datetimepicker documentation for more details](http://xdsoft.net/jqplugins/datetimepicker/).
|
|
120
120
|
|
|
121
|
+
## Theming
|
|
122
|
+
|
|
123
|
+
### Accent color
|
|
124
|
+
|
|
125
|
+
The upstream XDSoft stylesheet hardcodes a bright blue (`#33aaff`) on the
|
|
126
|
+
selected/current day, the current time slot and "today". This gem exposes that
|
|
127
|
+
color as a single SCSS variable so you can recolor the whole picker without
|
|
128
|
+
`!important` overrides. Set it **before** importing the gem; the default keeps
|
|
129
|
+
the original blue, so existing apps are unaffected:
|
|
130
|
+
|
|
131
|
+
```scss
|
|
132
|
+
$aa-datetimepicker-accent-color: #38678b; // your brand color
|
|
133
|
+
@import "active_admin_datetimepicker";
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Dark mode
|
|
137
|
+
|
|
138
|
+
The picker follows the host's dark theme using the same triggers as
|
|
139
|
+
[`active_admin_theme`](https://github.com/activeadmin-plugins/active_admin_theme):
|
|
140
|
+
the OS `prefers-color-scheme: dark` preference and an explicit
|
|
141
|
+
`html[data-theme="dark"]`. Under either, the picker adopts XDSoft's built-in
|
|
142
|
+
`.xdsoft_dark` skin (its orange current/today, dark surfaces). A page pinned
|
|
143
|
+
with `html[data-theme="light"]` always stays light. No configuration is needed;
|
|
144
|
+
it works out of the box once the gem's stylesheet is imported.
|
|
145
|
+
|
|
146
|
+
Note: in dark mode the current/today cells use XDSoft's built-in dark skin
|
|
147
|
+
colors, not `$aa-datetimepicker-accent-color`.
|
|
148
|
+
|
|
121
149
|
|
|
122
150
|
## Contributing
|
|
123
151
|
|
|
@@ -45,3 +45,159 @@ div.xdsoft_datetimepicker {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
|
|
49
|
+
// --- Configurable accent color ---------------------------------------------
|
|
50
|
+
// Upstream xdsoft hardcodes a bright blue (#33aaff) on the selected/current day,
|
|
51
|
+
// the current time slot and "today". There is no vendor variable for it, so host
|
|
52
|
+
// apps used to resort to !important overrides. Expose it two ways:
|
|
53
|
+
//
|
|
54
|
+
// * `$aa-datetimepicker-accent-color` — a compile-time SCSS variable, set it
|
|
55
|
+
// before importing this gem.
|
|
56
|
+
// * `--aa-datetimepicker-accent` — a runtime CSS custom property. Prefer this
|
|
57
|
+
// in sprockets apps: a SCSS variable set in the host manifest does NOT reach
|
|
58
|
+
// this gem's partial across a sprockets `@import` (separate compilation
|
|
59
|
+
// scope), whereas a CSS custom property flows through the cascade regardless.
|
|
60
|
+
// Set it on `:root` (or `html[data-theme=...]` for per-mode values).
|
|
61
|
+
//
|
|
62
|
+
// Both default to the original blue, so existing apps see no change unless they
|
|
63
|
+
// opt in. The CSS property wins when set; otherwise it falls back to the SCSS
|
|
64
|
+
// variable's value.
|
|
65
|
+
$aa-datetimepicker-accent-color: #33aaff !default;
|
|
66
|
+
$-aa-dtp-accent: var(--aa-datetimepicker-accent, #{$aa-datetimepicker-accent-color});
|
|
67
|
+
|
|
68
|
+
// Dark-mode surface/text/border, same idea as the accent: runtime CSS custom
|
|
69
|
+
// properties so a themed host can bind the picker to its own dark palette
|
|
70
|
+
// (e.g. `--aa-datetimepicker-surface: var(--aa-surface)`), with fallbacks that
|
|
71
|
+
// are a soft dark rather than pure black so the picker is usable out of the box.
|
|
72
|
+
$-aa-dtp-surface: var(--aa-datetimepicker-surface, #1f242a);
|
|
73
|
+
$-aa-dtp-surface-2: var(--aa-datetimepicker-surface-2, #262c33);
|
|
74
|
+
$-aa-dtp-text: var(--aa-datetimepicker-text, #cfd3d8);
|
|
75
|
+
$-aa-dtp-text-muted: var(--aa-datetimepicker-text-muted, #8a9099);
|
|
76
|
+
$-aa-dtp-border: var(--aa-datetimepicker-border, #3a4048);
|
|
77
|
+
$-aa-dtp-hover: var(--aa-datetimepicker-hover, #2e353d);
|
|
78
|
+
|
|
79
|
+
div.xdsoft_datetimepicker {
|
|
80
|
+
.xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current,
|
|
81
|
+
.xdsoft_calendar td.xdsoft_current,
|
|
82
|
+
.xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
|
|
83
|
+
background: $-aa-dtp-accent;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// "today" is a text color, not a fill
|
|
87
|
+
.xdsoft_calendar td.xdsoft_today {
|
|
88
|
+
color: $-aa-dtp-accent;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// When today is also the selected cell, its accent fill needs light text
|
|
92
|
+
// (otherwise accent-on-accent hides the number).
|
|
93
|
+
.xdsoft_calendar td.xdsoft_today.xdsoft_current {
|
|
94
|
+
color: #fff;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,
|
|
98
|
+
.xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current.xdsoft_disabled:hover {
|
|
99
|
+
background: $-aa-dtp-accent !important;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
// --- Dark mode -------------------------------------------------------------
|
|
105
|
+
// Follow the host's dark theme using the same triggers active_admin_theme uses:
|
|
106
|
+
// the OS `prefers-color-scheme` preference (unless the page is pinned light) and
|
|
107
|
+
// an explicit `html[data-theme="dark"]`. Rather than invent new dark colors we
|
|
108
|
+
// reuse xdsoft's own built-in `.xdsoft_dark` skin, re-scoped onto
|
|
109
|
+
// `.xdsoft_datetimepicker` directly (the picker is appended to <body>, so it can
|
|
110
|
+
// never carry the `.xdsoft_dark` class on its own). A `[data-theme="light"]`
|
|
111
|
+
// page always stays light.
|
|
112
|
+
@mixin aa-datetimepicker-dark {
|
|
113
|
+
.xdsoft_datetimepicker {
|
|
114
|
+
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.6);
|
|
115
|
+
background: $-aa-dtp-surface;
|
|
116
|
+
border: 1px solid $-aa-dtp-border;
|
|
117
|
+
color: $-aa-dtp-text;
|
|
118
|
+
|
|
119
|
+
.xdsoft_timepicker .xdsoft_time_box {
|
|
120
|
+
border: 1px solid $-aa-dtp-border;
|
|
121
|
+
}
|
|
122
|
+
.xdsoft_timepicker .xdsoft_time_box > div > div {
|
|
123
|
+
background: $-aa-dtp-surface;
|
|
124
|
+
border-top: 1px solid $-aa-dtp-border;
|
|
125
|
+
color: $-aa-dtp-text;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.xdsoft_label {
|
|
129
|
+
background-color: $-aa-dtp-surface;
|
|
130
|
+
}
|
|
131
|
+
.xdsoft_label > .xdsoft_select {
|
|
132
|
+
border: 1px solid $-aa-dtp-border;
|
|
133
|
+
background: $-aa-dtp-surface;
|
|
134
|
+
}
|
|
135
|
+
.xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
|
|
136
|
+
color: $-aa-dtp-text;
|
|
137
|
+
background: $-aa-dtp-hover;
|
|
138
|
+
}
|
|
139
|
+
.xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
|
|
140
|
+
background: $-aa-dtp-accent;
|
|
141
|
+
box-shadow: none;
|
|
142
|
+
color: #fff;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.xdsoft_calendar td,
|
|
146
|
+
.xdsoft_calendar th {
|
|
147
|
+
background: $-aa-dtp-surface;
|
|
148
|
+
border: 1px solid $-aa-dtp-border;
|
|
149
|
+
color: $-aa-dtp-text;
|
|
150
|
+
}
|
|
151
|
+
.xdsoft_calendar th {
|
|
152
|
+
background: $-aa-dtp-surface-2;
|
|
153
|
+
color: $-aa-dtp-text-muted;
|
|
154
|
+
}
|
|
155
|
+
.xdsoft_calendar td.xdsoft_other_month,
|
|
156
|
+
.xdsoft_calendar td.xdsoft_disabled {
|
|
157
|
+
color: $-aa-dtp-text-muted;
|
|
158
|
+
}
|
|
159
|
+
.xdsoft_calendar td.xdsoft_today {
|
|
160
|
+
color: $-aa-dtp-accent;
|
|
161
|
+
}
|
|
162
|
+
.xdsoft_calendar td.xdsoft_default,
|
|
163
|
+
.xdsoft_calendar td.xdsoft_current,
|
|
164
|
+
.xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
|
|
165
|
+
background: $-aa-dtp-accent;
|
|
166
|
+
box-shadow: none;
|
|
167
|
+
color: #fff;
|
|
168
|
+
}
|
|
169
|
+
.xdsoft_calendar td:hover:not(.xdsoft_current),
|
|
170
|
+
.xdsoft_timepicker .xdsoft_time_box > div > div:hover:not(.xdsoft_current) {
|
|
171
|
+
color: $-aa-dtp-text !important;
|
|
172
|
+
background: $-aa-dtp-hover !important;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.xdsoft_scrollbar > .xdsoft_scroller {
|
|
176
|
+
background: $-aa-dtp-border !important;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Month prev/next, the "today" home button and the time-column up/down
|
|
180
|
+
// scrollers are a dark PNG sprite with no vendor variable — on the dark
|
|
181
|
+
// surface they disappear. Invert so the arrows read as light icons. The
|
|
182
|
+
// time scrollers also carry .xdsoft_prev/.xdsoft_next, so they're covered.
|
|
183
|
+
.xdsoft_prev,
|
|
184
|
+
.xdsoft_next,
|
|
185
|
+
.xdsoft_today_button {
|
|
186
|
+
filter: invert(1);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.xdsoft_copyright {
|
|
190
|
+
color: $-aa-dtp-text-muted !important;
|
|
191
|
+
a { color: $-aa-dtp-text !important; }
|
|
192
|
+
a:hover { color: $-aa-dtp-text-muted !important; }
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// OS preference, unless the user explicitly chose light
|
|
198
|
+
@media (prefers-color-scheme: dark) {
|
|
199
|
+
html:not([data-theme="light"]) { @include aa-datetimepicker-dark; }
|
|
200
|
+
}
|
|
201
|
+
// Explicit user choice always wins
|
|
202
|
+
html[data-theme="dark"] { @include aa-datetimepicker-dark; }
|
|
203
|
+
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: active_admin_datetimepicker
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.
|
|
4
|
+
version: 2.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Igor Fedoronchuk
|
|
@@ -66,7 +66,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
66
66
|
- !ruby/object:Gem::Version
|
|
67
67
|
version: '0'
|
|
68
68
|
requirements: []
|
|
69
|
-
rubygems_version:
|
|
69
|
+
rubygems_version: 4.0.20
|
|
70
70
|
specification_version: 4
|
|
71
71
|
summary: datetimepicker extension for ActiveAdmin
|
|
72
72
|
test_files: []
|