diff --git a/src/Foundation.hs b/src/Foundation.hs index fac4c3e0c..463c9b497 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -1005,17 +1005,15 @@ siteLayout' headingOverride widget = do addScript $ StaticR js_utils_alerts_js addScript $ StaticR js_utils_asidenav_js addScript $ StaticR js_utils_inputs_js + addScript $ StaticR js_utils_showHide_js addStylesheet $ StaticR css_utils_tabber_scss addStylesheet $ StaticR css_utils_alerts_scss addStylesheet $ StaticR css_utils_asidenav_scss + addStylesheet $ StaticR css_utils_showHide_scss + addStylesheet $ StaticR css_utils_tooltip_scss -- widgets $(widgetFile "default-layout") $(widgetFile "standalone/modal") - $(widgetFile "standalone/showHide") - $(widgetFile "standalone/inputs") - $(widgetFile "standalone/tooltip") - $(widgetFile "standalone/tabber") - $(widgetFile "standalone/datepicker") withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet") diff --git a/src/Handler/Utils/Table/Pagination.hs b/src/Handler/Utils/Table/Pagination.hs index 368758bea..b5b36fdcf 100644 --- a/src/Handler/Utils/Table/Pagination.hs +++ b/src/Handler/Utils/Table/Pagination.hs @@ -576,7 +576,7 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db , let t' = toPathPiece $ SortingSetting t d ] wIdent :: Text -> Text - wIdent = toPathPiece . WithIdent dbtIdent + wIdent = toPathPiece . WithIdent dbtIdent dbsAttrs' | not $ null dbtIdent = ("id", dbtIdent) : dbsAttrs | otherwise = dbsAttrs @@ -802,7 +802,7 @@ cellTooltip :: (RenderMessage UniWorX msg, IsDBTable m a) => msg -> DBCell m a - cellTooltip msg = cellContents.mapped %~ (<> tipWdgt) where tipWdgt = [whamlet| -
+
_{msg} |] diff --git a/templates/standalone/showHide.lucius b/static/css/utils/showHide.scss similarity index 100% rename from templates/standalone/showHide.lucius rename to static/css/utils/showHide.scss diff --git a/static/css/utils/tabber.scss b/static/css/utils/tabber.scss index 6f823b410..d135a5f27 100644 --- a/static/css/utils/tabber.scss +++ b/static/css/utils/tabber.scss @@ -17,7 +17,7 @@ text-align: center; padding: 0 13px; margin: 0 2px; - background-color: #b3b7c1; + background-color: var(--color-dark); color: white; font-size: 16px; text-transform: uppercase; @@ -35,5 +35,5 @@ .tab-opener.tab-visible { background-color: transparent; color: rgb(52, 48, 58); - border-bottom-color: #5F98C2; + border-bottom-color: var(--color-primary); } diff --git a/templates/standalone/tooltip.lucius b/static/css/utils/tooltip.scss similarity index 97% rename from templates/standalone/tooltip.lucius rename to static/css/utils/tooltip.scss index 0a2154768..7e538e46a 100644 --- a/templates/standalone/tooltip.lucius +++ b/static/css/utils/tooltip.scss @@ -1,4 +1,4 @@ -.js-tooltip { +.tooltip { position: relative; display: inline-block; height: 1.5rem; @@ -67,7 +67,7 @@ @media (max-width: 768px) { - .js-tooltip { + .tooltip { display: block; margin-top: 10px; diff --git a/static/js/utils/showHide.js b/static/js/utils/showHide.js new file mode 100644 index 000000000..5b531c2f1 --- /dev/null +++ b/static/js/utils/showHide.js @@ -0,0 +1,55 @@ +(function() { + 'use strict'; + + window.utils = window.utils || {}; + + var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE'; + /** + * div + * div.js-show-hide__toggle + * toggle here + * div + * content here + */ + window.utils.showHide = function(wrapper, options) { + function addEventHandler(el) { + el.addEventListener('click', function elClickListener() { + var newState = el.parentElement.classList.toggle('js-show-hide--collapsed'); + updateLSState(el.dataset.shIndex || null, newState); + }); + } + + function updateLSState(index, state) { + if (!index) { + return false; + } + var lsData = fromLocalStorage(); + lsData[index] = state; + window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData)); + } + + function collapsedStateInLocalStorage(index) { + return fromLocalStorage()[index] || null; + } + + function fromLocalStorage() { + return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {}; + } + + Array + .from(wrapper.querySelectorAll('.js-show-hide__toggle')) + .forEach(function(el) { + var index = el.dataset.shIndex || null; + el.parentElement.classList.toggle( + 'js-show-hide--collapsed', + collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true' + ); + Array.from(el.parentElement.children).forEach(function(el) { + if (!el.classList.contains('js-show-hide__toggle')) { + el.classList.add('js-show-hide__target'); + } + }); + addEventHandler(el); + }); + }; +})(); diff --git a/templates/standalone/datepicker.julius b/templates/default-layout.julius similarity index 72% rename from templates/standalone/datepicker.julius rename to templates/default-layout.julius index 9bf21c071..52f28f0d7 100644 --- a/templates/standalone/datepicker.julius +++ b/templates/default-layout.julius @@ -5,7 +5,7 @@ function setupDatepicker(wrapper) { dtLocal: { enableTime: true, altInput: true, - altFormat: "j. F Y, H:i", + altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale dateFormat: "Y-m-dTH:i", time_24hr: true }, @@ -36,5 +36,13 @@ function setupDatepicker(wrapper) { } document.addEventListener('DOMContentLoaded', function() { + var I18N = { + filesSelected: 'Dateien ausgewählt', // TODO: interpolate these to be translated + selectFile: 'Datei auswählen', + selectFiles: 'Datei(en) auswählen', + }; + window.utils.setup('flatpickr', document.body, { setupFunction: setupDatepicker }); + window.utils.setup('showHide', document.body); + window.utils.setup('inputs', document.body, { i18n: I18N }); }); diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet index c8c501841..7fbcc896d 100644 --- a/templates/multiFileField.hamlet +++ b/templates/multiFileField.hamlet @@ -15,6 +15,6 @@ $# new files