many improvements for redmine backlogs:

- custom CSS for jquery-ui and jquery.qtip
- restyled tooltips
- better dropdown behavior

Gruntfile.js

@@ -22,7 +22,13 @@ module.exports = function(grunt) {
           'plugins/redmine_backlogs/statistics.css':
             '<%= src %>sass/plugins/redmine_backlogs/statistics.scss',
           'plugins/redmine_backlogs/taskboard.css':
-            '<%= src %>sass/plugins/redmine_backlogs/taskboard.scss'
+            '<%= src %>sass/plugins/redmine_backlogs/taskboard.scss',
+          'plugins/redmine_backlogs/jquery/jquery-ui.css':
+            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery-ui.scss',
+          'plugins/redmine_backlogs/jquery/jquery.multiselect.css':
+            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss',
+          'plugins/redmine_backlogs/jquery/jquery.qtip.css':
+            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss'
         }
       }
     },

plugins/redmine_backlogs/jquery/jquery.multiselect.css

@@ -0,0 +1 @@
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:0.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{display:none;position:absolute;padding:3px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 3px 8px rgba(0,0,0,0.07);z-index:10000}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:0.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}

plugins/redmine_backlogs/jquery/jquery.qtip.css

@@ -0,0 +1 @@
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{position:relative;padding:10px;border:1px solid #ccc;background-color:#fff;color:#555555;font-size:0.92em;text-align:left;word-wrap:break-word;box-shadow:0 2px 2px rgba(0,0,0,0.2);overflow:hidden}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;margin:0 auto;border:0 none;background:transparent;overflow:hidden;z-index:10}

src/sass/components/_jquery-ui.scss

@@ -39,6 +39,10 @@
     color: $header-text;
     font-weight: bold;
 
+    a {
+        color: $header-text;
+    }
+
     a,
     button {
         &.ui-state-default {
@@ -112,6 +116,10 @@
     background: $component-active-bg;
     color: $component-active-color;
     font-weight: normal;
+
+    .ui-icon {
+        background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
+    }
 }
 
 .ui-state-active a,

src/sass/plugins/redmine_backlogs/global.scss

@@ -251,24 +251,7 @@ ul.ui-sortable {
  * Story tooltip
  */
 .ui-tooltip {
-    .ui-tooltip-tip,
     .ui-tooltip-content {
-        border-color: $tooltip-border;
-        background-color: $tooltip-bg;
-    }
-
-    .ui-tooltip-content {
-        padding: $padding-base-vertical;
-        color: $tooltip-text;
-        font-size: $font-size-small;
-        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
-
-        > div {
-            max-height: 200px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
         hr {
             margin-top:    $line-height-computed / 2;
             margin-bottom: $line-height-computed / 2;
@@ -280,6 +263,30 @@ ul.ui-sortable {
             display: none;
         }
     }
+
+    .issue-description {
+        max-height: 10em;
+        margin-top: 12px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .issue-field {
+        margin: 2px 0 0;
+        padding-left: 160px;
+        overflow: hidden;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        > label {
+            margin-left: -160px;
+            padding-right: 5px;
+            float: left;
+            font-weight: bold;
+        }
+    }
 }
 
 .tooltip_text {
@@ -318,141 +325,3 @@ body {
         }
     }
 }
-
-#ui-datepicker-div {
-    width: 16em;
-    padding: 3px;
-    border: 1px solid $panel-border;
-    background: $body-bg;
-    color: $text-color;
-    font-size: $font-size-base;
-    box-shadow: $panel-shadow;
-
-    .ui-widget-header {
-        border: 0 none;
-        background: $header-bg;
-        color: $header-text;
-        font-weight: bold;
-    }
-
-    .ui-state-default {
-        border: 1px solid $body-bg;
-        background: $body-bg;
-        color: $component-color;
-        font-weight: normal;
-        box-shadow: none;
-
-        a,
-        a:link,
-        a:visited {
-            color: $component-color;
-            text-decoration: none;
-        }
-    }
-
-    .ui-state-hover,
-    .ui-state-focus {
-        border: 1px solid $component-active-border;
-        background: $component-active-bg;
-        color: $component-active-color;
-        font-weight: normal;
-    }
-
-    .ui-datepicker-header {
-        padding: .3em;
-    }
-
-    .ui-datepicker-prev {
-        left: .3em;
-    }
-
-    .ui-datepicker-next {
-        right: .3em;
-    }
-
-    .ui-datepicker-prev,
-    .ui-datepicker-next {
-        top: .3em;
-        border: 0 none;
-        background: transparent;
-
-        .ui-icon {
-            background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
-        }
-
-        &.ui-state-hover {
-            border-color: darken($header-bg, 12%);
-            background: darken($header-bg, 10%);
-        }
-    }
-
-    .ui-datepicker-title {
-        margin: 0 (1.8em + .3em);
-    }
-
-    select.ui-datepicker-month,
-    select.ui-datepicker-year {
-        width: 49%;
-        height: 1.8em;
-        margin: 0;
-    }
-
-    select.ui-datepicker-year {
-        margin-left: 1%;
-    }
-
-    .ui-datepicker-calendar {
-        td {
-            text-align: right;
-
-            &.ui-datepicker-week-col {
-                padding-right: $table-condensed-cell-padding;
-            }
-        }
-    }
-
-    .ui-datepicker-today {
-        .ui-state-highlight {
-            border-color: $component-active-border;
-            background: $component-bg;
-            color: $component-color;
-        }
-
-        .ui-state-hover {
-            background: $component-active-bg;
-            color: $component-active-color;
-        }
-    }
-
-    .ui-datepicker-current-day {
-        .ui-state-active {
-            border-color: $highlight-border;
-            background: $highlight-bg;
-            color: $highlight-text;
-        }
-    }
-
-    .ui-datepicker-buttonpane {
-        button {
-            padding: $input-padding-vertical $input-padding-horizontal;
-        }
-
-        .ui-state-default {
-            border-color: $component-border;
-            background: $component-bg;
-        }
-
-        .ui-state-focus,
-        .ui-state-hover {
-            border-color: $component-active-bg;
-            background: $component-active-bg;
-            color: $component-active-color;
-        }
-
-        .ui-state-active {
-            border-color: $highlight-border;
-            background: $highlight-bg;
-            color: $highlight-text;
-        }
-    }
-}

src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss

@@ -0,0 +1,118 @@
+@import "../common";
+
+.ui-multiselect {
+    padding: 2px 0 2px 4px;
+    text-align: left;
+
+    span.ui-icon {
+        float: right;
+    }
+}
+
+.ui-multiselect-single .ui-multiselect-checkboxes {
+    input {
+        position: absolute !important;
+        top: auto !important;
+        left: -9999px;
+    }
+
+    label {
+        padding: 5px !important;
+    }
+}
+
+.ui-multiselect-header {
+    margin-bottom: 3px;
+    padding: 3px;
+
+    ul {
+        font-size: $font-size-list;
+
+        li {
+            padding: 0 10px 0 0;
+            float: left;
+        }
+    }
+
+    a {
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    span.ui-icon {
+        float: left;
+    }
+
+    li.ui-multiselect-close {
+        padding-right: 0;
+        float: right;
+        text-align: right;
+    }
+}
+
+.ui-multiselect-menu {
+    display: none;
+    position: absolute;
+    padding: 3px;
+    text-align: left;
+    box-shadow: $panel-shadow;
+    z-index: 10000;
+}
+
+.ui-multiselect-checkboxes {
+    position: relative;
+    padding-right: 2px;
+    overflow-y: scroll;
+
+    input[type="checkbox"] {
+        top: 0;
+        margin: 3px 0 0 -20px;
+        float: left;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    label {
+        display: block;
+        padding: 3px 1px;
+        padding-left: 20px + 6px;
+        border: 1px solid transparent;
+        cursor: default;
+        @include user-select(none);
+
+        input {
+            position: relative;
+            top: 1px;
+        }
+    }
+
+    li {
+        clear: both;
+        font-size: $font-size-list;
+
+        &.ui-multiselect-optgroup-label {
+            margin-bottom: 2px;
+            border-bottom: 1px solid $panel-border;
+            font-weight: bold;
+            text-align: center;
+
+            a {
+                display: block;
+                margin: 1px 0;
+                padding: 3px;
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+/* remove label borders in IE6 because IE6 does not support transparency */
+
+* html .ui-multiselect-checkboxes label {
+    border: 0 none;
+}

src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss

@@ -0,0 +1,37 @@
+@import "../common";
+
+.qtip {
+    position: absolute;
+    top: -31000px;
+    left: -31000px;
+    width: auto;
+    max-width: 500px;
+    outline: none;
+}
+
+.ui-tooltip-content {
+    position: relative;
+    padding: 10px;
+    border: 1px solid $tooltip-border;
+    background-color: $tooltip-bg;
+    color: $tooltip-text;
+    font-size: $font-size-list;
+    text-align: left;
+    word-wrap: break-word;
+    box-shadow: 0 2px 2px rgba(#000, .2);
+    overflow: hidden;
+}
+
+.ui-tooltip-tip {
+    border-color: $tooltip-border;
+    background-color: $tooltip-bg;
+}
+
+.ui-tooltip-tip {
+    position: absolute;
+    margin: 0 auto;
+    border: 0 none;
+    background: transparent;
+    overflow: hidden;
+    z-index: 10;
+}

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -314,13 +314,13 @@ $story-sp-input-width:          50px;
             font-size: $font-size-small;
             line-height: $line-height-base;
             overflow: visible;
-            @include transition(background-color .07s .2s, border-color .07s .2s);
+            @include transition(background-color 0s .1s, border-color 0s .1s);
 
             &:hover {
                 border-color: $body-bg;
                 background-color: $body-bg;
                 z-index: 1000;
-                @include transition(background-color .07s .05s, border-color .07s .05s);
+                @include transition(background-color 0s 0s, border-color 0s 0s);
             }
 
             .icon {
@@ -332,21 +332,21 @@ $story-sp-input-width:          50px;
                 background-position: -64px -16px;
             }
 
-            .items {
+            ul {
                 position: absolute;
                 top: $header-line-height + 1px;
                 left: -1px;
                 margin: 0;
                 padding: $padding-small-vertical 0;
-                border: 1px solid $gray-light;
+                border: 1px solid $header-bg;
-                border-top: 0 none;
+                border-top-width: 0;
                 border-radius: 0 0 $border-radius-base $border-radius-base;
                 background-color: $body-bg;
                 list-style: none;
                 box-shadow: 0 2px 1px rgba(#000, .1);
                 visibility: hidden;
                 z-index: 999;
-                @include transition(visibility 0s .2s);
+                @include transition(visibility 0s .1s);
 
                 a {
                     color: $gray-darker;
@@ -355,12 +355,12 @@ $story-sp-input-width:          50px;
 
             &:hover .items {
                 visibility: visible;
-                @include transition(visibility 0s .05s);
+                @include transition(visibility 0s 0s);
             }
 
             .item {
                 position: relative;
-                min-width: 150px;
+                min-width: 100px;
                 white-space: nowrap;
 
                 > a {
@@ -383,24 +383,18 @@ $story-sp-input-width:          50px;
                 }
 
                 ul {
-                    display: none;
                     position: absolute;
-                    top: -1px;
+                    top: -($padding-small-vertical + 1px);
                     left: 100%;
-                    margin: 0;
+                    border-width: 1px;
-                    padding: 0;
-                    border: 1px solid $gray-light;
-                    border-left: 0 none;
-                    background-color: $body-bg;
-                    list-style: none;
-                    box-shadow: 0 2px 1px rgba(#000, .1);
                 }
 
                 &:hover {
-                    background-color: $gray-lightest;
+                    background-color: darken($body-bg, 8%);
 
                     ul {
-                        display: block;
+                        visibility: visible;
+                        @include transition(visibility 0s 0s);
                     }
                 }
             }