Themes UI rating, modifies clearable to be set to true when only one icon is used

RELEASE NOTES.md

@@ -8,13 +8,11 @@
 - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description``
 
 **Enhancements**
-- **Table** - Tables are no longer striped by default, must specify variation 'striped'
-- **Form** - Form now has a success state which will automatically display success messages
-- **Form** - Forms in 'success' state will now show success messages inside
-- **List** - Child lists can now be formatted to sit inside text content
 - **Button** - Now has compact form, used for fitting into tight spaces
 - **Checkbox** - All styles have been redone. Standard checkboxes are now based around PX and not EM making sure there are no unusual circles or rounding issues. Checkboxes also now use a custom font for glyphs instead of CSS tricks.
 - **Dropdown** - New action combo will change text of adjacent button, select will select element but not change text
+- **Form** - Form now has a success state which will automatically display success messages
+- **Form** - Forms in 'success' state will now show success messages inside
 - **Form** - Inputs now use 1em font size and correctly match selection dropdown height
 - **Form** - Inverted form now properly styles loader
 - **Form** - New field type ``required`` formats labels to show filling out field is mandatory
@@ -26,11 +24,15 @@
 - **Image** - New ``bordered image`` variation
 - **Label** - Added tag label and empty circular label style
 - **Label** - Now has compact form, for fitting into tight spaces
+- **List** - Child lists can now be formatted to sit inside text content
+- **List** - List images can now specify vertical alignment
+- **List** - List spacing defaults have been adjusted to be more consistent
 - **Popup** - Popup can now allow itself not to be closed when hovered over
 - **Popup** - Popup content can now be specified on initialization.
+- **Rating** - Rating now uses an embedded icon font to maximize compatibility
+- **Sidebar** - Sidebar now has tall / very tall variations for resizing top/bottom sidebars
 - **Steps** - Steps can now have icons, descriptions and titles. Step default theme has been modified significantly to be more flexible.
-- **List** - List spacing defaults have been adjusted to be more consistent
-- **List** - List images can now specify vertical alignment
+- **Table** - Tables are no longer striped by default, must specify variation 'striped'
 
 ### Version 0.15.0 - Mar 14, 2014
 

server/documents/modules/rating.html.eco

@@ -2,13 +2,19 @@
 layout      : 'default'
 css         : 'rating'
 
+element     : 'rating'
+elementType : 'element'
+
 title       : 'Rating'
-description : 'A rating lets a user assess and view the desirability of content'
+description : 'A rating allows a user to indicate their interest'
 type        : 'UI Module'
+
+themes      : ['Default']
 ---
 
 <%- @partial('header', { tabs: 'module' }) %>
 
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/rating.less" />
 <script src="/javascript/rating.js"></script>
 
 <div class="main container">
@@ -26,20 +32,15 @@ type        : 'UI Module'
 
     <div class="example">
       <h4 class="ui header">Rating</h4>
-      <p>A basic rating</p>
+      <p>A basic rating </p>
       <div class="ui rating">
         <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
       </div>
     </div>
 
     <div class="example">
       <h4 class="ui header">Star</h4>
       <p>A rating can use a set of star icons</p>
-      <div class="ui info message">Star and heart rating types require the inclusion of semantic <a href="/elements/icon.html">ui icons</a></div>
 
       <div>
         Average rating:
@@ -272,8 +273,8 @@ type        : 'UI Module'
         </tr>
         <tr>
           <td>clearable</td>
-          <td>false</td>
-          <td>If enabled clicking on the current star rating will clear the rating</td>
+          <td>auto</td>
+          <td>By default a rating will be only clearable if there is 1 icon. Setting to true/false will allow or disallow a user to clear their rating</td>
         </tr>
         <tr>
           <td>interactive</td>

src/definitions/modules/rating.js

@@ -120,9 +120,12 @@ $.fn.rating = function(parameters) {
             var
               $activeIcon   = $(this),
               currentRating = module.getRating(),
-              rating        = $icon.index($activeIcon) + 1
+              rating        = $icon.index($activeIcon) + 1,
+              canClear      = (settings.clearable == 'auto')
+               ? ($icon.size() === 1)
+               : settings.clearable
             ;
-            if(settings.clearable && currentRating == rating) {
+            if(canClear && currentRating == rating) {
               module.clearRating();
             }
             else {
@@ -380,7 +383,7 @@ $.fn.rating.settings = {
 
   initialRating : 0,
   interactive   : true,
-  clearable     : false,
+  clearable     : 'auto',
 
   onRate        : function(rating){},
 

src/definitions/modules/rating.less

@@ -9,16 +9,26 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'rating';
+
+@import '../../semantic.config';
+
+
 /*******************************
            Rating
 *******************************/
 
 .ui.rating {
-  display: inline-block;
+  display: @display;
 
   font-size: 0em;
-  vertical-align: baseline;
-  margin: 0em 0.5rem 0em 0em;
+  vertical-align: @verticalAlign;
+  margin: @margin;
 }
 .ui.rating:last-child {
   margin-right: 0em;
@@ -37,18 +47,13 @@
   cursor: pointer;
 
   margin: 0em;
-
-  width: 1em;
+  width: @iconHitbox;
   height: auto;
   padding: 0em;
 
-  color: rgba(0, 0, 0, 0.15);
   font-weight: normal;
   font-style: normal;
 }
-.ui.rating .icon:before {
-  content: "\2605";
-}
 
 /*******************************
              Types
@@ -58,20 +63,20 @@
         Star
 --------------------*/
 
+/* Inactive */
 .ui.star.rating .icon {
-  width: 1.2em;
+  color: @starInactiveColor;
 }
 
-/* Star */
-.ui.star.rating .icon:before {
-  content: '\f006';
-  font-family: 'Icons';
+/* Active Star */
+.ui.star.rating .active.icon {
+  color: @starActiveColor !important;
 }
 
-/* Active Star */
-.ui.star.rating .active.icon:before {
-  content: '\f005';
-  font-family: 'Icons';
+/* Hovered Star */
+.ui.star.rating .icon.hover,
+.ui.star.rating .icon.hover.active {
+  color: @starHoverColor !important;
 }
 
 
@@ -79,35 +84,46 @@
         Heart
 --------------------*/
 
-.ui.heart.rating .icon {
-  width: 1.2em;
-}
-.ui.heart.rating .icon:before {
-  content: '\f08a';
-  font-family: 'Icons';
+.ui.star.rating .icon {
+  color: @heartInactiveColor;
 }
 
-/* Active */
-.ui.heart.rating .active.icon:before {
-  content: '\f004';
-  font-family: 'Icons';
-}
+/* Active Heart */
 .ui.heart.rating .active.icon {
-  color: #EF404A !important;
+  color: @heartActiveColor !important;
 }
 
-/* Hovered */
-.ui.heart.rating .hover.icon,
-.ui.heart.rating .active.hover.icon {
-  color: #FF2733 !important;
+/* Hovered Heart */
+.ui.heart.rating .icon.hover,
+.ui.heart.rating .icon.hover.active {
+  color: @heartHoverColor !important;
 }
 
+
 /*******************************
              States
 *******************************/
 
+
+/* Inactive Icon */
+.ui.rating .icon {
+  color: @inactiveColor;
+}
+
+/* Active Icon */
+.ui.rating .active.icon {
+  color: @activeColor;
+}
+
+/* Hovered Icon */
+.ui.rating .icon.hover,
+.ui.rating .icon.hover.active {
+  color: @hoverColor;
+}
+
+
 /*-------------------
-        Active
+       Disabled
 --------------------*/
 
 /* disabled rating */
@@ -115,44 +131,39 @@
   cursor: default;
 }
 
-/* active icons */
-.ui.rating .active.icon {
-  color: #FFCB08 !important;
-}
-
 
 /*-------------------
-        Hover
+     Interacting
 --------------------*/
 
-/* rating */
+/* Selected Rating */
 .ui.rating.hover .active.icon {
-  opacity: 0.5;
+  opacity: @interactiveIconOpacity;
 }
-
-/* icon */
-.ui.rating .icon.hover,
-.ui.rating .icon.hover.active {
-  opacity: 1;
-  color: #FFB70A !important;
+.ui.rating.hover .icon.hover,
+.ui.rating .icon.hover {
+  opacity: @interactiveHoveredIconOpacity;
 }
 
 
+
 /*******************************
           Variations
 *******************************/
 
 .ui.small.rating .icon {
-  font-size: 0.75rem;
+  font-size: @small;
 }
 .ui.rating .icon {
-  font-size: 1rem;
+  font-size: @medium;
 }
 .ui.large.rating .icon {
-  font-size: 1.5rem;
-  vertical-align: middle;
+  font-size: @large;
+  vertical-align: @oversizedVerticalAlign;
 }
 .ui.huge.rating .icon {
-  font-size: 2rem;
-  vertical-align: middle;
-}
+  font-size: @huge;
+  vertical-align: @oversizedVerticalAlign;
+}
+
+.loadUIOverrides();

src/definitions/modules/sidebar.less

@@ -196,8 +196,6 @@ body.pushed.scrolling.ui.dimmable {
   margin-left: -@veryWideWidth !important;
 }
 
-
-
 /*-------------------
        Height
 --------------------*/
@@ -262,6 +260,4 @@ body.pushed.scrolling.ui.dimmable {
   margin-top: -@veryTallHeight !important;
 }
 
-
-
 .loadUIOverrides();

src/themes/_site/modules/rating.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/_site/modules/rating.variables

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packages/default/modules/rating.variables

@@ -0,0 +1,45 @@
+/*-------------------
+       Rating
+--------------------*/
+
+@display: inline-block;
+@margin: 0em 0.5rem 0em 0em;
+@verticalAlign: middle;
+
+@iconHitbox: 1.2em;
+@inactiveColor: rgba(0, 0, 0, 0.15);
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Star */
+@starInactiveColor: @inactiveColor;
+@starHoverColor: #FFB70A;
+@starActiveColor: #FFCB08;
+
+/* Heart */
+@heartInactiveColor: @inactiveColor;
+@heartHoverColor: #FF2733;
+@heartActiveColor: #EF404A;
+
+/*-------------------
+        States
+--------------------*/
+
+@inactiveColor: rgba(0, 0, 0, 0.15);
+@hoverColor: @textColor;
+@activeColor: @darkTextColor;
+
+@interactiveIconOpacity: 0.5;
+@interactiveHoveredIconOpacity: 1;
+
+/*-------------------
+      Variations
+--------------------*/
+
+@small: 14px;
+@medium: 16px;
+@large: 24px;
+@huge: 28px;
+@oversizedVerticalAlign: middle;