From 49b0a9512a2805ddbdeb6aeb4868ec6921fc162f Mon Sep 17 00:00:00 2001 From: Nicolas Beiro LeBeau Date: Fri, 7 Feb 2020 15:38:09 -0500 Subject: [PATCH 001/126] flyout init --- app/assets/javascripts/transam_core/flyout.js | 25 ++ .../stylesheets/transam_core/flyout.css | 130 ++++++ app/views/shared/_footer.html.haml | 4 +- transam_core.iml | 410 ++++++++++-------- 4 files changed, 380 insertions(+), 189 deletions(-) create mode 100644 app/assets/javascripts/transam_core/flyout.js create mode 100644 app/assets/stylesheets/transam_core/flyout.css diff --git a/app/assets/javascripts/transam_core/flyout.js b/app/assets/javascripts/transam_core/flyout.js new file mode 100644 index 000000000..06af596c3 --- /dev/null +++ b/app/assets/javascripts/transam_core/flyout.js @@ -0,0 +1,25 @@ +// function closeFlyout() { +// for(var elem of document.getElementsByClassName("closeFlyout")){ +// elem.addEventListener("click", function(){ +// this.form.reset(); +// }); +// } +// } + + +function createFlyout(before, append) { + $(document).ready(function(){ + before; + $("#flyout-body:empty").append(append); + }); + // closeFlyout(); +} + +function toggleExtend(trigger, elem, isRight) { + if (isRight) { + $(trigger).on('click', function() {$(elem).toggleClass( "extend-right" )}); + } else { + $(trigger).on('click', function() {$(elem).toggleClass( "extend-left" )}); + elem.scrollLeft = window.innerWidth; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/transam_core/flyout.css b/app/assets/stylesheets/transam_core/flyout.css new file mode 100644 index 000000000..22bb256ec --- /dev/null +++ b/app/assets/stylesheets/transam_core/flyout.css @@ -0,0 +1,130 @@ + +html { + max-width: 100%; + overflow-x: hidden; +} + +.flyout-checkbox { + opacity: 0; + display:none; + /* position: absolute; */ + /* left: 50vw; */ +} +.flyout-label { + cursor: pointer; + border-radius: 5px; + color: #fff; + background-color: #17406E; + border-color: #133459; + margin-left: 10px; +} +.flyout-label:before { + content: "\f067"; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + width: 1.28571429em; + text-align: center; +} + +.flyout-content-right { + position: absolute; + left: 110%; + transition: left 0.5s ease; + background: white; + z-index: 999; +} + +.flyout-content-left { + position: absolute; + left: -100vw; + transition: left 0.5s ease; + background: white; + z-index: 999; +} + +.flyout-panel { + height: fit-content; + width: 33vw; + border: 1px solid gray; + border-radius: 5px; + box-shadow: -5px 0px 5px 0px #BFBFBF + +} +.flyout-panel header { + height: 40px; + background: #f5f5f5; + border-top-left-radius:5px; + border-top-right-radius:5px; + border-bottom: 1px solid gray; +} +/*.flyout-panel header span {*/ + /*padding:10px;*/ +/*}*/ + +.flyout-panel header label { + color: #17406e; + background: #f5f5f5; + border-top-left-radius:5px; + border-top-right-radius:5px; + border-bottom-left-radius:0px; + border-bottom-right-radius:0px; + width: 100%; + margin-left: 0px; +} + +.flyout-panel header label:before { + display: none; +} + +.flyout-content-right header:after, .flyout-content-left header:after { + content: '\00d7'; + opacity: 0.5; + position: absolute; + right: 2%; + pointer-events: none; +} +.flyout-content-right header:hover:after, .flyout-content-left header:hover:after { + opacity: 1; +} + +.flyout-panel p{ + margin:20px; +} + +.flyout-checkbox:checked ~ .flyout-content-right { + left: -25vw; + display: block; +} + +.flyout-checkbox:checked ~ .flyout-content-left { + left: 0vw; + display: block; +} + + +.bootstrap-table, .fixed-table-container, .fixed-table-body { + width: 100%; + transition: margin 0.5s ease; +} + +.extend-right { + padding-right: 33%; + width: 133%; +} + +.extend-left { + width: 67vw; + margin-left: 33vw; +} + +.flyout-body { + padding: 40px 20px; + margin-left: 25%; +} + +.closeFlyout { + +} \ No newline at end of file diff --git a/app/views/shared/_footer.html.haml b/app/views/shared/_footer.html.haml index 6c7715525..39d64f50c 100755 --- a/app/views/shared/_footer.html.haml +++ b/app/views/shared/_footer.html.haml @@ -2,7 +2,7 @@ .visible-sm-block.visible-xs-block.hidden-lg-block.hidden-md-block .col-sm-12.col.col-xs-12 %p.text-muted.credit.text-center - = link_to 'Help', html_help_pdf_path, :download => '', :target => "_blank" + -#= link_to 'Help', html_help_pdf_path, :download => 'test1', :target => "_blank" -#= link_to 'Privacy Policy', page_path('privacy_policy') -#• -#= link_to 'Security Policy', page_path('security_policy') @@ -19,7 +19,7 @@ = link_to "Cambridge Systematics", "http://camsys.com", :target => "_blank" .col-lg-4.col-md-4.col-sm-6.col-xs-12 %p.text-muted.credit.text-center - = link_to 'Help', html_help_pdf_path, :download => '', :target => "_blank" + -#= link_to 'Help', html_help_pdf_path, :download => 'test2', :target => "_blank" -#= link_to 'Privacy Policy', page_path('privacy_policy') -#• -#= link_to 'Security Policy', page_path('security_policy') diff --git a/transam_core.iml b/transam_core.iml index 90a0c6175..c224376f3 100644 --- a/transam_core.iml +++ b/transam_core.iml @@ -16,199 +16,235 @@ + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 98ba02fcdd8da8ef7f7d5633359906ede3906f51 Mon Sep 17 00:00:00 2001 From: Nicolas Beiro LeBeau Date: Tue, 17 Mar 2020 16:34:24 -0400 Subject: [PATCH 002/126] cleaning up and finish first pass --- app/assets/javascripts/transam_core/flyout.js | 5 ++-- .../stylesheets/transam_core/flyout.css | 30 ++++++++++++++++++- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/transam_core/flyout.js b/app/assets/javascripts/transam_core/flyout.js index 06af596c3..49e438fbb 100644 --- a/app/assets/javascripts/transam_core/flyout.js +++ b/app/assets/javascripts/transam_core/flyout.js @@ -7,12 +7,11 @@ // } -function createFlyout(before, append) { +function createFlyout(elem, before, append) { $(document).ready(function(){ before; - $("#flyout-body:empty").append(append); + $(elem + ":empty").append(append); }); - // closeFlyout(); } function toggleExtend(trigger, elem, isRight) { diff --git a/app/assets/stylesheets/transam_core/flyout.css b/app/assets/stylesheets/transam_core/flyout.css index 22bb256ec..02563a103 100644 --- a/app/assets/stylesheets/transam_core/flyout.css +++ b/app/assets/stylesheets/transam_core/flyout.css @@ -37,6 +37,14 @@ html { z-index: 999; } +.flyout-content-right-stretch { + position: absolute; + left: 110vw; + transition: left 0.5s ease; + background: white; + z-index: 999; +} + .flyout-content-left { position: absolute; left: -100vw; @@ -79,16 +87,31 @@ html { display: none; } -.flyout-content-right header:after, .flyout-content-left header:after { +.flyout-content-right-stretch .flyout-panel { + width: 40vw; +} + +.flyout-content-right header:after, .flyout-content-left header:after { + content: '\00d7'; + opacity: 0.5; + position: absolute; + right: 2%; + pointer-events: none; +} +.flyout-content-right-stretch header:after, .flyout-content-left header:after { content: '\00d7'; opacity: 0.5; position: absolute; right: 2%; pointer-events: none; } + .flyout-content-right header:hover:after, .flyout-content-left header:hover:after { opacity: 1; } +.flyout-content-right-stretch header:hover:after, .flyout-content-left header:hover:after { + opacity: 1; +} .flyout-panel p{ margin:20px; @@ -99,6 +122,11 @@ html { display: block; } +.flyout-checkbox:checked ~ .flyout-content-right-stretch { + left: 33vw; + display: block; +} + .flyout-checkbox:checked ~ .flyout-content-left { left: 0vw; display: block; From ac78dab5181928ce61015c8c17c2f42320a0d85e Mon Sep 17 00:00:00 2001 From: Nicolas Beiro LeBeau Date: Fri, 20 Mar 2020 10:51:14 -0400 Subject: [PATCH 003/126] tables first pass fuctionality, and some styling --- .../transam_core/table-library/main.js | 64 +++++++ .../transam_core/table-library/pagination.js | 157 ++++++++++++++++++ .../transam_core/table-library/search.js | 26 +++ 3 files changed, 247 insertions(+) create mode 100644 app/assets/javascripts/transam_core/table-library/main.js create mode 100644 app/assets/javascripts/transam_core/table-library/pagination.js create mode 100644 app/assets/javascripts/transam_core/table-library/search.js diff --git a/app/assets/javascripts/transam_core/table-library/main.js b/app/assets/javascripts/transam_core/table-library/main.js new file mode 100644 index 000000000..097400198 --- /dev/null +++ b/app/assets/javascripts/transam_core/table-library/main.js @@ -0,0 +1,64 @@ +$("table[use]").ready(()=>{ + + $("table[use]").each((i, value)=>{ + if($(value).attr('use') == 'true'){ + const id = $(value).attr('id'); + let pagination = $(value).data('pagination'); + let curPage = $(value).data('currentPage'); + let curPageSize = $(value).data('currentPageSize'); + let pageSizes = $(value).data('pageSizes').split(','); + let columns = $(value).data('columns').split(/\r?\n/); + let col_names = []; + let col_widths = []; + let col_types = []; + for(let col of columns){ + let x = col.split(','); + col_names.push(x[0]); + col_widths.push(x[1]); + col_types.push(x[2]); + } + let search = $(value).data('search'); + + + initialize(id, col_names, col_widths, col_types, curPage, curPageSize, pageSizes); + + if(search == 'client') { + addSearch(id); + } + } + }); + +}); + +function initialize(id, cols, col_widths, col_types, curPage, curPageSize, pageSizes) { + updateHeader(id, cols, col_widths, col_types); + pagination(id, curPage, curPageSize, pageSizes); + +} + + +function updateHeader(id, cols, col_ws, col_ts){ + let table = $("#" + id); + let header = $('').addClass("header"); + let colgroup = $(''); + header.append($('').addClass("header-item header-checkbox").append($('').addClass("header-checkbox").attr('type', "checkbox"))); + colgroup.append($('').addClass('col-item').attr('style', 'width: 20px')); + for (let i=0;i').addClass('header-item').attr('col_type', col_ts[i].toString()).append('').addClass('header-text').text(cols[i].toString())); + colgroup.append($('').addClass('col-item').attr('style', 'width: '+ col_ws[i].toString())); + } + table.prepend($('').append(header)).prepend(colgroup); +} + +// assumes right number of columns +function add_row(id, vals) { + let row = $('').addClass('table-row'); + let checkbox = $('').addClass("cell-checkbox").append($('').attr('type', "checkbox")); + row.append(checkbox); + for(let val of vals) { + row.append($('').addClass("row-item").append($('
').addClass('cell-text').html(val))); + } + $('#'+id).append(row); +} + + diff --git a/app/assets/javascripts/transam_core/table-library/pagination.js b/app/assets/javascripts/transam_core/table-library/pagination.js new file mode 100644 index 000000000..a5f776a23 --- /dev/null +++ b/app/assets/javascripts/transam_core/table-library/pagination.js @@ -0,0 +1,157 @@ +$(document).on('click', ".page-select-item:not(.search-result-page)", function(){ + let table = $(this).closest('.library-table').find("table").eq(0); + updatePage(table.attr('id'), $(this).index(), table.data('currentPageSize')); +}); + +$(document).on('click', ".page-select-item.search-result-page", function(){ + let table = $(this).closest('.library-table').find("table").eq(0); + updatePage(table.attr('id'), $(this).index(), table.data('currentPageSize'), true); +}); + +$(document).on('click', ".page-select-arrow-left", function(){ + let table = $(this).closest('.library-table').find("table").eq(0); + + if ($(this).parent().find(".search-result-page").length > 0){ + updatePage(table.attr('id'), table.data("currentPage") - 1, table.data('currentPageSize'), true); + } else { + updatePage(table.attr('id'), table.data("currentPage") - 1, table.data('currentPageSize')); + + } +}); + +$(document).on('click', ".page-select-arrow-right", function(){ + let table = $(this).closest('.library-table').find("table").eq(0); + let cur = $(".page-selected").index(); + if ($(".search-result-page").length > 0){ + updatePage(table.attr('id'), table.data("currentPage") + 1, table.data('currentPageSize'), true); + } else { + updatePage(table.attr('id'), table.data("currentPage") + 1, table.data('currentPageSize')); + + } +}); + +$(document).on('change', ".page-size-dropdown", function(){ + let table = $(this).closest('.library-table').find("table").eq(0); + updatePage(table.attr('id'), 0, parseInt(this.value), table.parent().find("search-result-page").length > 0); +}); + + + + +function pagination(id, curPage, curPageSize, pageSizes) { + + let total = $('#'+id).find('.table-row').length; + + let footer = $('
').addClass("pagination-wrapper"); + + let sizeSelect = $('
').addClass("size-select"); + sizeSelect.text("Rows per page "); + let dropdown = $('').addClass("searchbar"); + + $(searchbar).on("keyup", function(){ + let value = $(this).val().toLowerCase(); + + if(value === "") { + removeSearch(id); + return; + } + + $('#'+id +" .table-row").filter(function(){ + $(this).removeClass("search-result"); + if($(this).text().toLowerCase().indexOf(value) > -1){ + $(this).addClass("search-result").show(); + } + }); + updatePage(id, 0, $('#'+id).data('currentPageSize'), true); + }); + $('#'+id).parent().prepend(searchbar); +} + +function removeSearch(id) { + $('#'+id +" .table-row").removeClass("search-result"); + updatePage(id, 0, $('#'+id).data('currentPageSize')); +} \ No newline at end of file From 08b11d6a00a6f7bc8c3f0579edbccbb645f46ad3 Mon Sep 17 00:00:00 2001 From: Nicolas Beiro LeBeau Date: Fri, 20 Mar 2020 11:08:02 -0400 Subject: [PATCH 004/126] and the styles --- .../transam_core/table-library/styles.css | 216 ++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 app/assets/stylesheets/transam_core/table-library/styles.css diff --git a/app/assets/stylesheets/transam_core/table-library/styles.css b/app/assets/stylesheets/transam_core/table-library/styles.css new file mode 100644 index 000000000..eb9021d0d --- /dev/null +++ b/app/assets/stylesheets/transam_core/table-library/styles.css @@ -0,0 +1,216 @@ +:root { + --white: #fff; + + --blue-base: #18406E; /*// replaces #18406E and close matches*/ + --blue-dark: #0E2744; + --blue-dark-desaturated: #3E5269; + --blue-medium: #3762A1; + --blue-light: #5B8EDC; + --blue-lighter: #C3DBFF; + + /*// grays*/ + --gray-base: #7F849B; + + --gray-darker: #0E1824; + --gray-dark: #474C5E; + --gray-medium: #BBBFCE; + --gray-light: #E8EAF2; + --gray-lighter: #F6F8FF; + + --gray-medium-dark: #9DA1B5; + --gray-medium-light: #CDD0DC; + + --black: var(--gray-darker); /*// replaces #000000*/ + + /*// secondary colors*/ + --turquoise: #56C6DE; + --gold: #E3A62E; + --red: #E44B54; + --green: #0ABF94; + + --turquoise-light: #BCEFFF; + --turquoise-dark: #039CCD; + --gold-light: #FFF1D6; + --red-light: #FFCFBF; + --green-light: #DBF3DD; +} + +.library-table { + background-color: var(--gray-light); + padding: 20px; +} + +.elbat { + background-color: var(--white); + margin: 12px 0px; + box-shadow: 0 0 0 1px var(--gray-medium-light); + -webkit-border-radius: .5em; + -moz-border-radius: .5em; + border-radius: .5em; + width: 100%; + table-layout: fixed; +} + +.col-item { +} + +.header-checkbox, .cell-checkbox { + text-align: center; + +} + +.header-checkbox { + padding: 0 !important; +} + +.cell-checkbox { + border-top: 1px solid var(--gray-medium-light); + border-left: 1px solid var(--gray-medium-light); + background-color: var(--white); +} + + +.header-item { + font-family: 'Source Sans Pro', sans-serif; + padding: 10px; + background-color: var(--gray-lighter); + border-left: solid var(--gray-medium-light) 1px; + vertical-align: bottom; +} + +.header-item:first-child { + border-left: none; + border-top-left-radius: .5em; +} + +.header-item:last-child { + border-top-right-radius: .5em; +} + +.table-row:hover .row-item .cell-text, +.table-row:hover .cell-checkbox, +.table-row:hover .cell-checkbox input, +.table-row:hover .row-item { + background-color: var(--gray-light); +} + +.row-item { + border-top: 1px solid var(--gray-medium-light); + border-left: 1px solid var(--gray-medium-light); + padding: 1.375rem 1.5rem; + text-align: left; + letter-spacing: .03em; + white-space: nowrap; + background-color: #fff; + -webkit-transition: background-color .25s ease-in-out; + -o-transition: background-color .25s ease-in-out; + transition: background-color .25s ease-in-out; + max-width: 16em; + font-size: .925em; + vertical-align: top; + overflow: hidden; + position: relative; +} + +.row-item:hover { + overflow: visible; +} + +.cell-text { + padding: .375rem .5rem; + display: inline-block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + min-width: 100%; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + -webkit-box-sizing: border-box; + background: #fff; +/* box-sizing: border-box; */ + +} + +.cell-text:hover { + z-index: 100; + width: auto; + /*border-right: 1px solid ;*/ + box-shadow: 0 0 0 1px var(--gray-medium-light); + background: -webkit-gradient(linear, left top, right top, from(#E8EAF2), to(#F6F8FF)); + background: -webkit-linear-gradient(left, #E8EAF2 0%, #F6F8FF 100%); + background: -o-linear-gradient(left, #E8EAF2 0%, #F6F8FF 100%); + background: linear-gradient(90deg, #E8EAF2 0%, #F6F8FF 100%); + overflow: visible; +} + +.table-row .cell-checkbox:first-child { + border-left: none; +} + +.table-row:last-child .cell-checkbox:first-child { + border-bottom-left-radius: .5em; +} + +.table-row:last-child td:last-child { + border-bottom-right-radius: .5em; +} + +.table-row { + display:none; +} + +.page-select-wrapper { + display: flex; +} + +.page-select { + display: flex; +} + +.page-select-arrow-left, .page-select-arrow-right { + display:flex; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + margin: .25em; + padding: .25em .5em; + opacity: 1; +} + +.page-select-item { + padding: .25em .5em; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + margin: .25em; +} + +.page-select-item:hover, .page-select-arrow-left:hover, .page-select-arrow-right:hover { + background: #FFFFFF; +} + +.page-selected { + background: #FFFFFF; + font-weight: bold; +} + +.pagination-wrapper { + display: flex; + justify-content: space-between; +} + +.size-select, .page-status, .page-selected { + float: left; +} + +.page-size-dropdown { + /*-webkit-appearance: none;*/ + /*-moz-appearance: none;*/ + /*appearance:none;*/ + border: none; + box-shadow: none; + border-radius: 0; + background: transparent; +} \ No newline at end of file From e956578a963df0011c3b733140806199b6dafebd Mon Sep 17 00:00:00 2001 From: Nicolas Beiro LeBeau Date: Mon, 23 Mar 2020 09:36:10 -0400 Subject: [PATCH 005/126] styling, fonts, pagination arrows --- .../transam_core/table-library/pagination.js | 1 + .../transam_core/table-library/styles.css | 22 +++++++++++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/transam_core/table-library/pagination.js b/app/assets/javascripts/transam_core/table-library/pagination.js index a5f776a23..675fe9db3 100644 --- a/app/assets/javascripts/transam_core/table-library/pagination.js +++ b/app/assets/javascripts/transam_core/table-library/pagination.js @@ -51,6 +51,7 @@ function pagination(id, curPage, curPageSize, pageSizes) { dropdown.append($('