renalware-core 2.0.123 → 2.0.124

data/app/assets/javascripts/renalware/components/toggler.js

@@ -0,0 +1,64 @@
+function initTogglers() {
+
+  function triggerMasonryLayoutRefresh() {
+    $('.grid > .row').masonry('layout');
+  }
+
+  function toggleTarget(elem, open) {
+    // Get e.g. the tr to toggle
+    var toggled = $(elem).attr("href");
+    $(toggled).toggle(open);
+    // If we are toggling open tr B by clicking a link within tr A above it,
+    // add a class to the tr A sibling above it so it can also be styled
+    // to match the expanded TR B below it, to create a clear connection between the two.
+    // $(toggled).prev().toggleClass("content-toggled", open);
+    $(elem).closest("tr").toggleClass("content-toggled", open);
+  }
+
+  var togglers = $("a[data-behaviour='toggler']");
+  if (togglers.length > 0) {
+    $(togglers).on("click", function(event) {
+      event.preventDefault();
+      toggleTarget(event.target);
+      triggerMasonryLayoutRefresh();
+    })
+  }
+
+  // This handles toggers in a thead th that when clicked will open all the
+  // toggleable rows in the table.
+  var tableTogglers = $("a[data-behaviour='table-toggler']");
+  if (tableTogglers.length > 0) {
+    $(tableTogglers).on("click", function(event) {
+      event.preventDefault();
+      var parentTable = $(event.target).closest("table");
+      var togglers = $("a[data-behaviour='toggler']", parentTable);
+
+      // If the toggler in the the already has the class togglrf indicting it is
+      // toggled open then reverse that anf toggle accordingly
+      var open = !$(event.target).hasClass("toggled");
+      $(event.target).toggleClass("toggled", open);
+      $(togglers).each(function(e) { toggleTarget(this, open) });
+      triggerMasonryLayoutRefresh();
+    })
+  }
+
+  // css-toggler applies where you want a single line of text with a trailing ellipsis
+  // contained in a .css-toggle-container to be expandable. Targeting the href selector here
+  // will toggle the .expanded class on that element.
+  // See the SCSS for what that class does, but it will probably take off the nowrap and allow
+  // the content to expand downwards so it is all visible.
+  // This is useful for expanding content in a table cell for example.
+  var togglers = $("a[data-behaviour='css-toggler']");
+  if (togglers.length > 0) {
+    $(togglers).on("click", function(event) {
+      event.preventDefault();
+      var selectorsToToggle = $(event.target).attr("href");
+      $(selectorsToToggle).toggleClass("expanded");
+      triggerMasonryLayoutRefresh();
+    })
+  }
+}
+
+$(function() {
+  initTogglers();
+});

data/app/assets/javascripts/renalware/{application.js.erb → core.js.erb}

@@ -33,7 +33,6 @@
 //= require select2/dist/js/select2
 //= require jquery_nested_form
 //= require foundation-datepicker
-//= require renalware/clockpicker
 //= require renalware/double_scroll
 //= require cocoon
 //= require mousetrap/mousetrap
@@ -44,7 +43,7 @@
 //= require rails.validations.simple_form
 //= require print-js/dist/print
 //= require moment/moment
-//= require_directory .
+//= require_directory ./components
 //
 
 // Define a console.log if one does not yet exist - e.g. we in IE11

data/app/assets/stylesheets/renalware/README.md

@@ -0,0 +1,16 @@
+# CSS
+
+The css or scss files in this top-level folder will be compiled and linked
+by sprockets 4 as individually downloadble css assets (as .css and .css.gz files).
+
+core.scss is the main css file which imports other .scss files in
+./partials and ./modules, and includes css assets from external gem dependencies.
+
+The other css files mainly relate to pdf processing and are required because
+of the way wicked_pdf and the wkhtmltopdf process handle (ie inlining) css.
+If we replaced wkhtmltopdf with prawn for example, these css files would not be
+required.
+
+watermark.css is required by both pdf and html rendering which is why its a separate thing.
+
+See also e.g. https://github.com/rails/sprockets#link_directory

data/app/assets/stylesheets/renalware/base/_variables.scss

@@ -116,6 +116,7 @@ $footer-bg-colour: $patient-menu-background-colour;
 // Forms
 $form-hint-colour: #bbb;
 $disabled-colour: #ccc;
+$pipe-separator-colour: #AAA;
 
 // Menus
 $patient-menu-icon-color: $gainsboro;

data/app/assets/stylesheets/renalware/lib/_clockpicker.css

@@ -212,164 +212,164 @@
  */
 
 .clockpicker .input-group-addon {
-	cursor: pointer;
+  cursor: pointer;
 }
 .clockpicker-moving {
-	cursor: move;
+  cursor: move;
 }
 .clockpicker-align-left.popover > .arrow {
-	left: 25px;
+  left: 25px;
 }
 .clockpicker-align-top.popover > .arrow {
-	top: 17px;
+  top: 17px;
 }
 .clockpicker-align-right.popover > .arrow {
-	left: auto;
-	right: 25px;
+  left: auto;
+  right: 25px;
 }
 .clockpicker-align-bottom.popover > .arrow {
-	top: auto;
-	bottom: 6px;
+  top: auto;
+  bottom: 6px;
 }
 .clockpicker-popover .popover-title {
-	background-color: #fff;
-	color: #999;
-	font-size: 24px;
-	font-weight: bold;
-	line-height: 30px;
-	text-align: center;
+  background-color: #fff;
+  color: #999;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 30px;
+  text-align: center;
 }
 .clockpicker-popover .popover-title span {
-	cursor: pointer;
+  cursor: pointer;
 }
 .clockpicker-popover .popover-content {
-	background-color: #f8f8f8;
-	padding: 12px;
+  background-color: #f8f8f8;
+  padding: 12px;
 }
 .popover-content:last-child {
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 .clockpicker-plate {
-	background-color: #fff;
-	border: 1px solid #ccc;
-	border-radius: 50%;
-	width: 200px;
-	height: 200px;
-	overflow: visible;
-	position: relative;
-	/* Disable text selection highlighting. Thanks to Hermanya */
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+  overflow: visible;
+  position: relative;
+  /* Disable text selection highlighting. Thanks to Hermanya */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .clockpicker-canvas,
 .clockpicker-dial {
-	width: 200px;
-	height: 200px;
-	position: absolute;
-	left: -1px;
-	top: -1px;
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: -1px;
+  top: -1px;
 }
 .clockpicker-minutes {
-	visibility: hidden;
+  visibility: hidden;
 }
 .clockpicker-tick {
-	border-radius: 50%;
-	color: #666;
-	line-height: 26px;
-	text-align: center;
-	width: 26px;
-	height: 26px;
-	position: absolute;
-	cursor: pointer;
+  border-radius: 50%;
+  color: #666;
+  line-height: 26px;
+  text-align: center;
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  cursor: pointer;
 }
 .clockpicker-tick.active,
 .clockpicker-tick:hover {
-	background-color: rgb(192, 229, 247);
-	background-color: rgba(0, 149, 221, .25);
+  background-color: rgb(192, 229, 247);
+  background-color: rgba(0, 149, 221, .25);
 }
 .clockpicker-button {
-	background-image: none;
-	background-color: #fff;
-	border-width: 1px 0 0;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	margin: 0;
-	padding: 10px 0;
+  background-image: none;
+  background-color: #fff;
+  border-width: 1px 0 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin: 0;
+  padding: 10px 0;
 }
 .clockpicker-button:hover {
-	background-image: none;
-	background-color: #ebebeb;
+  background-image: none;
+  background-color: #ebebeb;
 }
 .clockpicker-button:focus {
-	outline: none!important;
+  outline: none!important;
 }
 .clockpicker-dial {
-	-webkit-transition: -webkit-transform 350ms, opacity 350ms;
-	-moz-transition: -moz-transform 350ms, opacity 350ms;
-	-ms-transition: -ms-transform 350ms, opacity 350ms;
-	-o-transition: -o-transform 350ms, opacity 350ms;
-	transition: transform 350ms, opacity 350ms;
+  -webkit-transition: -webkit-transform 350ms, opacity 350ms;
+  -moz-transition: -moz-transform 350ms, opacity 350ms;
+  -ms-transition: -ms-transform 350ms, opacity 350ms;
+  -o-transition: -o-transform 350ms, opacity 350ms;
+  transition: transform 350ms, opacity 350ms;
 }
 .clockpicker-dial-out {
-	opacity: 0;
+  opacity: 0;
 }
 .clockpicker-hours.clockpicker-dial-out {
-	-webkit-transform: scale(1.2, 1.2);
-	-moz-transform: scale(1.2, 1.2);
-	-ms-transform: scale(1.2, 1.2);
-	-o-transform: scale(1.2, 1.2);
-	transform: scale(1.2, 1.2);
+  -webkit-transform: scale(1.2, 1.2);
+  -moz-transform: scale(1.2, 1.2);
+  -ms-transform: scale(1.2, 1.2);
+  -o-transform: scale(1.2, 1.2);
+  transform: scale(1.2, 1.2);
 }
 .clockpicker-minutes.clockpicker-dial-out {
-	-webkit-transform: scale(.8, .8);
-	-moz-transform: scale(.8, .8);
-	-ms-transform: scale(.8, .8);
-	-o-transform: scale(.8, .8);
-	transform: scale(.8, .8);
+  -webkit-transform: scale(.8, .8);
+  -moz-transform: scale(.8, .8);
+  -ms-transform: scale(.8, .8);
+  -o-transform: scale(.8, .8);
+  transform: scale(.8, .8);
 }
 .clockpicker-canvas {
-	-webkit-transition: opacity 175ms;
-	-moz-transition: opacity 175ms;
-	-ms-transition: opacity 175ms;
-	-o-transition: opacity 175ms;
-	transition: opacity 175ms;
+  -webkit-transition: opacity 175ms;
+  -moz-transition: opacity 175ms;
+  -ms-transition: opacity 175ms;
+  -o-transition: opacity 175ms;
+  transition: opacity 175ms;
 }
 .clockpicker-canvas-out {
-	opacity: 0.25;
+  opacity: 0.25;
 }
 .clockpicker-canvas-bearing,
 .clockpicker-canvas-fg {
-	stroke: none;
-	fill: rgb(0, 149, 221);
+  stroke: none;
+  fill: rgb(0, 149, 221);
 }
 .clockpicker-canvas-bg {
-	stroke: none;
-	fill: rgb(192, 229, 247);
+  stroke: none;
+  fill: rgb(192, 229, 247);
 }
 .clockpicker-canvas-bg-trans {
-	fill: rgba(0, 149, 221, .25);
+  fill: rgba(0, 149, 221, .25);
 }
 .clockpicker-canvas line {
-	stroke: rgb(0, 149, 221);
-	stroke-width: 1;
-	stroke-linecap: round;
-	/*shape-rendering: crispEdges;*/
+  stroke: rgb(0, 149, 221);
+  stroke-width: 1;
+  stroke-linecap: round;
+  /*shape-rendering: crispEdges;*/
 }
 .clockpicker-button.am-button {
-	margin: 1px;
-	padding: 5px;
-	border: 1px solid rgba(0, 0, 0, .2);
-	border-radius: 4px;
+  margin: 1px;
+  padding: 5px;
+  border: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 4px;
 
 }
 .clockpicker-button.pm-button {
-	margin: 1px 1px 1px 136px;
-	padding: 5px;
-	border: 1px solid rgba(0, 0, 0, .2);
-	border-radius: 4px;
+  margin: 1px 1px 1px 136px;
+  padding: 5px;
+  border: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 4px;
 }

data/app/assets/stylesheets/renalware/partials/_button.scss

@@ -79,3 +79,52 @@
   border-bottom-right-radius: 0 !important;
   border-top-right-radius: 0 !important;
 }
+
+.button.dropdown.actions {
+  @extend %fa-icon;
+  @extend .fas;
+  background-color: $white;
+  color: $monsoon;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 0 .3rem 0 0;
+  padding: 0.2rem .9rem;
+  border: solid 1px $light-grey;
+  vertical-align: middle;
+
+  &:hover {
+    background-color: darken(#efefef, 10);
+    color: darken(#555, 10);
+  }
+
+  &:before {
+    content: fa-content($fa-var-ellipsis-h);
+  }
+
+  &:after {
+    border: 0;
+    position: relative;
+  }
+}
+
+.f-dropdown {
+  /* separator */
+  li.separator {
+    border-top: 1px solid #ccc;
+    margin: .3rem 0 .1rem 0;
+    padding: 0;
+  }
+}
+
+.f-dropdown.f-dropdown-no-arrow {
+  border-radius: 3px;
+  box-shadow: 0 3px 12px rgba(0,0,0,.05);
+  margin-left: 23px;
+  margin-top: 0;
+  max-width: 150px;
+
+  &:before, &:after {
+    border: 0;
+    position: relative;
+  }
+}