Finish theming popup, fix positioning variations to never escape boundaries of element

10 years ago · 40379b9841
5 changed files with 82 additions and 59 deletions
--- a/server/documents/modules/popup.html.eco
+++ b/server/documents/modules/popup.html.eco
@ -5,7 +5,13 @@ css         : 'popup'
 title       : 'Popup'
 description : 'A popup displays additional information on top of a page element'
 type        : 'UI Module'
+
+element     : 'popup'
+elementType : 'module'
+
+themes      : ['Default']
 ---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/popup.less" />
 <script src="/javascript/popup.js"></script>

 <%- @partial('header', { tabs: 'module' }) %>
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@ -624,6 +624,7 @@ body.guide .main.container > * {
  position: absolute;
  margin: 0em;
  width: auto;
+  font-size: 1.5em;
  height: auto;
  padding: 0.5em !important;
 }
--- a/src/definitions/modules/popup.js
+++ b/src/definitions/modules/popup.js
@ -485,10 +485,10 @@ $.fn.popup = function(parameters) {
            switch(position) {
              case 'top left':
                positioning = {
-                  bottom :  parentHeight - offset.top + distanceAway,
-                  right  :  parentWidth - offset.left - arrowOffset,
                  top    : 'auto',
-                  left   : 'auto'
+                  bottom : parentHeight - offset.top + distanceAway,
+                  left   : offset.left + arrowOffset,
+                  right  : 'auto'
                };
              break;
              case 'top center':
@ -501,10 +501,10 @@ $.fn.popup = function(parameters) {
              break;
              case 'top right':
                positioning = {
+                  bottom :  parentHeight - offset.top + distanceAway,
+                  right  :  parentWidth - offset.left - width - arrowOffset,
                  top    : 'auto',
-                  bottom : parentHeight - offset.top + distanceAway,
-                  left   : offset.left + width + arrowOffset,
-                  right  : 'auto'
+                  left   : 'auto'
                };
              break;
              case 'left center':
@ -526,9 +526,9 @@ $.fn.popup = function(parameters) {
              case 'bottom left':
                positioning = {
                  top    : offset.top + height + distanceAway,
-                  right  : parentWidth - offset.left - arrowOffset,
-                  left   : 'auto',
-                  bottom : 'auto'
+                  left   : offset.left + arrowOffset,
+                  bottom : 'auto',
+                  right  : 'auto'
                };
              break;
              case 'bottom center':
@ -542,9 +542,9 @@ $.fn.popup = function(parameters) {
              case 'bottom right':
                positioning = {
                  top    : offset.top + height + distanceAway,
-                  left   : offset.left + width + arrowOffset,
-                  bottom : 'auto',
-                  right  : 'auto'
+                  right  : parentWidth - offset.left  - width - arrowOffset,
+                  left   : 'auto',
+                  bottom : 'auto'
                };
              break;
            }
--- a/src/definitions/modules/popup.less
+++ b/src/definitions/modules/popup.less
@ -105,31 +105,31 @@
  left: 50%;
  right: auto;
  bottom: auto;
-  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: @bottomArrowBoxShadow;
 }

 .ui.bottom.left.popup {
-  margin-right: @boxArrowOffset;
+  margin-left: @boxArrowOffset;
 }
 .ui.bottom.left.popup:before {
  top: @arrowOffset;
-  right: @arrowDistanceFromEdge;
+  left: @arrowDistanceFromEdge;
+  right: auto;
  bottom: auto;
-  left: auto;
  margin-left: 0em;
-  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: @bottomArrowBoxShadow;
 }

 .ui.bottom.right.popup {
-  margin-left: @boxArrowOffset;
+  margin-right: @boxArrowOffset;
 }
 .ui.bottom.right.popup:before {
  top: @arrowOffset;
-  left: @arrowDistanceFromEdge;
-  right: auto;
+  right: @arrowDistanceFromEdge;
  bottom: auto;
+  left: auto;
  margin-left: 0em;
-  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: @bottomArrowBoxShadow;
 }

 /*--- Above ---*/
@ -141,23 +141,23 @@
  margin-left: @arrowOffset;
 }
 .ui.top.left.popup {
-  margin-right: @boxArrowOffset;
+  margin-left: @boxArrowOffset;
 }
 .ui.top.left.popup:before {
  bottom: @arrowOffset;
-  right: @arrowDistanceFromEdge;
+  left: @arrowDistanceFromEdge;
  top: auto;
-  left: auto;
+  right: auto;
  margin-left: 0em;
 }
 .ui.top.right.popup {
-  margin-left: @boxArrowOffset;
+  margin-right: @boxArrowOffset;
 }
 .ui.top.right.popup:before {
  bottom: @arrowOffset;
-  left: @arrowDistanceFromEdge;
+  right: @arrowDistanceFromEdge;
  top: auto;
-  right: auto;
+  left: auto;
  margin-left: 0em;
 }

@ -188,7 +188,7 @@
 .ui.loading.popup {
  display: block;
  visibility: hidden;
-  z-index: -1;
+  z-index: @loadingZIndex;
 }

 .ui.animating.popup,
@ -201,35 +201,23 @@
            Variations
 *******************************/

-/*--------------
-      Size
---------------*/
-
-.ui.small.popup {
-  font-size: 0.75rem;
-}
-.ui.large.popup {
-  font-size: 1rem;
-}
-
-
 /*--------------
     Colors
 ---------------*/

 /* Inverted colors  */
 .ui.inverted.popup {
-  background-color: #333333;
-  border: none;
-  color: #FFFFFF;
-  box-shadow: none;
+  background: @invertedBackground;
+  color: @invertedColor;
+  border: @invertedBorder;
+  box-shadow: @invertedBoxShadow;
 }
 .ui.inverted.popup .header {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: #FFFFFF;
+  background-color: @invertedHeaderBackground;
+  color: @invertedHeaderColor;
 }
 .ui.inverted.popup:before {
-  background-color: #333333;
+  background-color: @invertedArrowColor;
  box-shadow: none;
 }

@ -237,8 +225,14 @@
     Sizes
 ---------------*/

+.ui.small.popup {
+  font-size: @small;
+}
 .ui.popup {
  font-size: @medium;
 }
+.ui.large.poup {
+  font-size: @large;
+}

 .loadUIOverrides();
--- a/src/themes/packages/default/modules/popup.variables
+++ b/src/themes/packages/default/modules/popup.variables
@ -20,29 +20,28 @@
@fontStyle: normal;
@borderRadius: 0.2em;

-/* Placement */
-@popupDistanceAway: @arrowSize;
-@arrowDistanceFromEdge: 1em;
-@boxArrowOffset: -5em;
-
-
 /*-------------------
       Parts
 --------------------*/

+/* Placement */
+@arrowSize: 0.75em;
+@arrowWidth: 1em;
+@arrowDistanceFromEdge: 1em;
+@boxArrowOffset: 0em;
+@popupDistanceAway: @arrowSize;
+
+
 /* Header */
@headerFontFamily: @headerFont;
@headerFontSize: 1.125em;
@headerDistance: 0.5em;
@headerLineHeight: 1.2;

-
-
-@arrowSize: 0.75em;
+/* Arrow */
@arrowBackground: @white;
@arrowZIndex: 2;
-
-@arrowOffset: -0.4em;
+@arrowOffset: -(@arrowSize / 2);

@arrowShadowColor: rgba(0, 0, 0, 0.2);
@arrowStroke: 1px;
@ -50,6 +49,7 @@
@arrowBoxShadow: 1px 1px @arrowStroke @arrowShadowColor;
@leftArrowBoxShadow: 1px -1px @arrowStroke @arrowShadowColor;
@rightArrowBoxShadow: -1px 1px @arrowStroke @arrowShadowColor;
+@bottomArrowBoxShadow: -1px -1px @arrowStroke @arrowShadowColor;

 /*-------------------
       Coupling
@ -57,5 +57,27 @@

@popupButtonWidth: 100%;

+/*-------------------
+       States
+--------------------*/
+
+@loadingZIndex: -1;
+
+/*-------------------
+       Variations
+--------------------*/
+
+/* Inverted */
+@invertedBackground: @black;
+@invertedColor: @white;
+@invertedBorder: none;
+@invertedBoxShadow: none;
+
+@invertedHeaderBackground: rgba(0, 0, 0, 0.2);
+@invertedHeaderColor: @white;
+@invertedArrowColor: @black;
+
 /* Sizes */
-@medium: 0.875rem;
+@small: 0.8rem;
+@medium: 0.875rem;
+@large: 1rem;