purpleraft/PurpleMine2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many improvements for redmine backlogs:

Browse Source 
- custom CSS for jquery-ui and jquery.qtip
- restyled tooltips
- better dropdown behavior
This commit is contained in:
mrliptontea
2015-03-01 13:33:16 +01:00
parent 130e474efc
commit 937e79a1a8
13 changed files with 1575 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Gruntfile.js
View File

@@ -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'
}
}
},

2
plugins/redmine_backlogs/global.css
View File

File diff suppressed because one or more lines are too long

1
plugins/redmine_backlogs/jquery/jquery-ui.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
plugins/redmine_backlogs/jquery/jquery.multiselect.css Normal file
View File

@@ -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}

1
plugins/redmine_backlogs/jquery/jquery.qtip.css Normal file
View File

@@ -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}

2
plugins/redmine_backlogs/master_backlog.css
View File

File diff suppressed because one or more lines are too long

8
src/sass/components/_jquery-ui.scss
View File

@@ -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,

179
src/sass/plugins/redmine_backlogs/global.scss
View File

@@ -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;
}
}
}

1362
src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss Normal file
View File

File diff suppressed because it is too large Load Diff

118
src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss Normal file
View File

@@ -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;
}

37
src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss Normal file
View File

@@ -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;
}

32
src/sass/plugins/redmine_backlogs/master_backlog.scss
View File

@@ -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-top: 0 none;
border: 1px solid $header-bg;
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;
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);
border-width: 1px;
}
&:hover {
background-color: $gray-lightest;
background-color: darken($body-bg, 8%);
ul {
display: block;
visibility: visible;
@include transition(visibility 0s 0s);
}
}
}

2
stylesheets/application.css
View File

File diff suppressed because one or more lines are too long