Skip to content

Commit

Permalink
Improve overflow CSS for settings fields.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kohler
kohler committed Oct 5, 2023
1 parent 89ae497 commit 2e3055e
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 66 deletions.
42 changes: 16 additions & 26 deletions scripts/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,14 +97,6 @@ function settings_delete(elt, message) {
return true;
}

function settings_field_check_overflow() {
let xfv = this.firstChild;
while (!hasClass(xfv, "settings-xf-view")) {
xfv = xfv.nextSibling;
}
toggleClass(xfv, "settings-xf-overflow", xfv.scrollHeight > xfv.clientHeight + 5);
}

function settings_field_unfold(evt) {
if (evt.which.n !== 2) {
return;
Expand All @@ -120,8 +112,6 @@ function settings_field_unfold(evt) {
if (!evt.which.nofocus) {
$(this).scrollIntoView();
}
} else {
settings_field_check_overflow.call(this);
}
}

Expand Down Expand Up @@ -356,26 +346,26 @@ function add_dialog() {
}
function create(library) {
samples = library.samples;
var hc = popup_skeleton({className: "modal-dialog-wide"}), i, e;
const hc = popup_skeleton({className: "modal-dialog-wide"});
hc.push('<h2>Add field</h2>');
hc.push('<p>Choose a template for the new field.</p>');
hc.push('<div class="grid-select grid-select-autosubmit" role="listbox"></div>');
hc.push_actions(['<button type="submit" name="add" class="btn-primary">Add field</button>',
'<button type="button" name="cancel">Cancel</button>']);
$d = hc.show();
grid = $d[0].querySelector(".grid-select");
for (i = 0; i !== samples.length; ++i) {
e = $e("div", {"class": "settings-xf-view", role: "presentation"});
for (let i = 0; i !== samples.length; ++i) {
const e = $e("div", "settings-xf-view");
e.innerHTML = samples[i].sf_view_html;
grid.append($e("fieldset", {"class": "grid-option", "data-index": i, role: "option", tabindex: 0, "aria-selected": "false"},
$e("legend", null, samples[i].legend), e));
$e("legend", null, samples[i].legend),
$e("div", {"class": "settings-xf-viewport", role: "presentation"}, e)));
}
settings_disable_children(grid);
grid_select_event.call(grid, 0);
grid.addEventListener("keydown", grid_select_event);
grid.addEventListener("click", grid_select_event);
grid.addEventListener("dblclick", grid_select_event);
$(grid).children().each(settings_field_check_overflow);
$d.find("form").on("submit", submit);
}
demand_load.submission_field_library().then(create);
Expand Down Expand Up @@ -487,7 +477,6 @@ $(document).on("hotcrpsettingssf", ".settings-sf", function () {
$(edit).find(".uich").trigger("change");
sf_initializing = false;
removeClass(this, "hidden");
settings_field_check_overflow.call(this);
sf_order();
});

Expand Down Expand Up @@ -833,18 +822,18 @@ function rf_visibility_text(visibility) {
}

function rf_render_view(fld, example) {
var frag = document.createDocumentFragment(), labele, e, ve, t;
var xfv = $e("div", "settings-xf-view"), labele, e, ve, t;

// header
labele = $e("label", "revfn" + (fld.required ? " field-required" : ""),
fld.name || (example ? "Field name" : "<unnamed>"));
frag.append((e = $e("h3", "rfehead", labele)));
xfv.append((e = $e("h3", "rfehead", labele)));
if ((t = rf_visibility_text(fld.visibility))) {
e.append($e("div", "field-visibility", t));
}

// feedback
frag.append((e = $e("ul", "feedback-list")));
xfv.append((e = $e("ul", "feedback-list")));
if (fld.exists_if && /^round:[a-zA-Z][-_a-zA-Z0-9]*$/.test(fld.exists_if)) {
e.append($e("li", "is-diagnostic format-inline is-warning-note", "Present on " + fld.exists_if.substring(6) + " reviews"));
} else if (fld.exists_if) {
Expand All @@ -853,7 +842,7 @@ function rf_render_view(fld, example) {

// description
if (fld.description) {
frag.append((e = $e("div", "field-d")));
xfv.append((e = $e("div", "field-d")));
e.innerHTML = fld.description;
}

Expand Down Expand Up @@ -894,10 +883,10 @@ function rf_render_view(fld, example) {
labele.insertBefore($e("span", "checkc", $e("input", {type: "checkbox", disabled: true})), labele.firstChild);
}
if (ve.firstChild) {
frag.append(ve);
xfv.append(ve);
}

return frag;
return $e("div", "settings-xf-viewport", xfv);
}

function rf_move() {
Expand Down Expand Up @@ -1056,22 +1045,23 @@ function add_dialog() {
function create(library) {
samples = library.samples;
rftypes = library.types;
var hc = popup_skeleton({className: "modal-dialog-wide"}), i;
const hc = popup_skeleton({className: "modal-dialog-wide"});
hc.push('<h2>Add field</h2>');
hc.push('<p>Choose a template for the new field.</p>');
hc.push('<div class="grid-select grid-select-autosubmit" role="listbox"></div>');
hc.push_actions(['<button type="submit" name="add" class="btn-primary">Add field</button>',
'<button type="button" name="cancel">Cancel</button>']);
$d = hc.show();
grid = $d[0].querySelector(".grid-select");
for (i = 0; i !== samples.length; ++i) {
for (let i = 0; i !== samples.length; ++i) {
if (!samples[i].parse_value) {
samples[i] = rf_make_sample(samples[i]);
}
const xfvp = rf_render_view(samples[i], true);
xfvp.setAttribute("role", "presentation");
grid.append($e("fieldset", {"class": "grid-option", "data-index": i, role: "option", tabindex: 0, "aria-selected": "false"},
$e("legend", null, samples[i].legend),
$e("div", {"class": "settings-xf-view", role: "presentation"},
rf_render_view(samples[i], true))));
xfvp));
}
settings_disable_children(grid);
grid_select_event.call(grid, 0);
Expand Down
5 changes: 3 additions & 2 deletions src/settings/s_options.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,8 @@ function print_actions(SettingValues $sv) {

private function print_one_option_view(PaperOption $io, SettingValues $sv, $ctr) {
$disabled = $this->sfs->exists_disabled;
echo '<div id="sf/', $ctr, '/view" class="settings-xf-view fn2 ui js-foldup">';
echo '<div id="sf/', $ctr, '/view" class="settings-xf-viewbox fn2 ui js-foldup">',
'<div class="settings-xf-viewport"><div class="settings-xf-view">';
if ($disabled) {
$this->pt->msg_at($io->formid, "<0>This field is currently disabled", MessageSet::URGENT_NOTE);
} else if (strcasecmp($this->sfs->exists_if, "all") !== 0
Expand Down Expand Up @@ -412,7 +413,7 @@ private function print_one_option_view(PaperOption $io, SettingValues $sv, $ctr)
$io->print_web_edit($this->pt, $ov, $ov);
$io->set_editable_condition($ei);
$io->override_exists_condition(null);
echo '</div>';
echo '</div></div></div>';
}

const MODE_LIVE = 0;
Expand Down
2 changes: 1 addition & 1 deletion src/settings/s_reviewform.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -643,7 +643,7 @@ static function print(SettingValues $sv) {
'<div class="settings-draghandle ui-drag js-settings-drag" draggable="true" title="Drag to reorder fields">',
Icons::ui_move_handle_horizontal(),
'</div>',
'<div id="rf/$/view" class="settings-xf-view fn2 ui js-foldup"></div>',
'<div id="rf/$/view" class="settings-xf-viewbox fn2 ui js-foldup"></div>',
'<fieldset id="rf/$/edit" class="fieldset-covert settings-xf-edit fx2">',
'<div class="entryi mb-3" data-property="name"><div class="entry">',
'<input name="rf/$/name" id="rf/$/name" type="text" size="50" class="font-weight-bold want-focus want-delete-marker" placeholder="Field name">',
Expand Down
78 changes: 41 additions & 37 deletions stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1796,57 +1796,52 @@ th.settings-simplehead {
margin-bottom: 1.5em;
transition: opacity 0.5s;
}
.settings-xf-view, .mail-preview-send, .mail-editor {
.settings-xf-viewbox, .mail-preview-send, .mail-editor {
background-color: #f9fbfb;
}
.settings-xf-view:hover, .mail-preview-send:hover {
.settings-xf-viewbox:hover, .mail-preview-send:hover {
background-color: #ecf2f4;
}
.settings-xf:hover, .mail-preview-send:hover {
border-color: #a5a5a5;
}
.settings-xf-view {
padding: 16px;
.settings-xf-viewbox {
border-radius: 5px;
padding: 0 16px;
}
.settings-xf-viewport {
-webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 0.25) 8px,
black 20px calc(100% - 16px), transparent calc(100% - 8px));
mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 0.25) 8px,
black 20px calc(100% - 16px), transparent calc(100% - 8px));
}
.settings-xf-view {
padding-top: 16px;
padding-bottom: 16px;
}
.settings-sf > .settings-xf-view {
.settings-sf > .settings-xf-viewbox {
overflow-y: hidden;
}
.settings-sf.settings-xf-disabled > .settings-xf-view {
.settings-sf.settings-xf-disabled .settings-xf-viewport {
max-height: 10rem;
}
.settings-sf-final > .settings-xf-view {
.settings-sf-final > .settings-xf-viewbox {
background-color: #effcf0;
}
.settings-sf-final > .settings-xf-view:hover {
.settings-sf-final > .settings-xf-viewbox:hover {
background-color: #e8f5e9;
}
.settings-xf-disabled > .settings-xf-view {
.settings-xf-disabled > .settings-xf-viewbox {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M0 0l-34 34l17 0l34 -34z' fill='%23f9fbfb' /%3E%3Cpath d='M34 0l-34 34l17 0l34 -34z' fill='%23f9fbfb' /%3E%3Cpath d='M17 0l-34 34l17 0l34 -34z' fill='%23f5f2f2' /%3E%3Cpath d='M51 0l-34 34l17 0l34 -34z' fill='%23f5f2f2' /%3E%3C/svg%3E");
background-color: #f5f2f2;
}
.settings-xf-disabled > .settings-xf-view:hover {
.settings-xf-disabled > .settings-xf-viewbox:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M0 0l-34 34l17 0l34 -34z' fill='%23ecf2f4' /%3E%3Cpath d='M34 0l-34 34l17 0l34 -34z' fill='%23ecf2f4' /%3E%3Cpath d='M17 0l-34 34l17 0l34 -34z' fill='%23e4e7e7' /%3E%3Cpath d='M51 0l-34 34l17 0l34 -34z' fill='%23e4e7e7' /%3E%3C/svg%3E");
}
.settings-xf-overflow::after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
pointer-events: none;
background-image: linear-gradient(to top, rgba(249,251,251,1), rgba(249,251,251,1) 0.5rem, rgba(249,251,251,0));
width: 100%;
height: 3em;
border-radius: 5px;
}
.settings-xf-edit {
padding: 20px 16px 16px;
border-radius: 5px;
}
.settings-xf-view h3 {
max-width: 768px;
}
.settings-draghandle {
position: absolute;
display: inline-block;
Expand Down Expand Up @@ -1893,49 +1888,58 @@ hr.dropmark {
overflow-y: auto;
row-gap: 0.25rem;
column-gap: 0.25rem;
margin: -0.5rem;
margin: -16px -8px -8px;
padding-bottom: 8px;
-webkit-mask-image: linear-gradient(to top, transparent 0,
black 16px calc(100% - 16px), transparent calc(100% - 8px));
mask-image: linear-gradient(to top, transparent 0,
black 16px calc(100% - 16px), transparent calc(100% - 8px));
}
.grid-option {
overflow-y: visible;
margin: 0.5rem;
margin: 8px;
background-color: #f9fbfb;
position: relative;
}
.grid-option:hover {
border-color: #a5a5a5;
border-color: #a1a1f2;
background-color: #ecf2f4;
}
.grid-option.active, .grid-option.active:hover {
background: inherit;
}
fieldset.grid-option {
padding: 5px 12px 10px;
border-width: 2px;
border-color: #b8b8e5;
padding: 0 12px;
}
fieldset.grid-option.active {
border-color: blue;
border-color: AccentColor;
border-radius: 4px;
border-width: 2px;
padding: 4px 11px 9px;
}
fieldset.grid-option.active > legend {
font-weight: bold;
}
.grid-option > .settings-xf-view {
background: none;
.grid-option > .settings-xf-viewport {
margin-top: -12px;
opacity: 0.5;
padding: 0;
max-height: 50vh;
overflow-x: hidden;
overflow-y: auto;
}
.grid-option.active > .settings-xf-view {
.grid-option.active > .settings-xf-viewport {
opacity: 1;
}
.settings-xf-view h3 {
max-width: 768px;
}
.settings-xf-view > .pfe {
margin-bottom: 0;
}
.settings-xf-view > .pfe.pf-separator, .settings-xf-view > .rfehead {
.settings-xf-view > .pfe.pf-separator {
margin-top: 0.5rem;
}
.settings-xf-view > .rfehead {
margin-top: 0;
}
.settings-radio {
Expand Down

0 comments on commit 2e3055e

Please sign in to comment.