diff --git a/css/DMSDocumentCMSFields.css b/css/DMSDocumentCMSFields.css index f371693..0f65820 100644 --- a/css/DMSDocumentCMSFields.css +++ b/css/DMSDocumentCMSFields.css @@ -7,23 +7,22 @@ form.small .field input.text, form.small .field textarea, form.small .field sele #FileP .fieldgroup-field .fieldholder-small label { width: auto; margin-left: 0; padding-top: 0; margin-right: 10px; font-weight: bold; float: left; } #FileP .fieldgroup-field .fieldholder-small .readonly { font-style: italic; color: #666; } -#DocumentTypeID ul { padding: 0; } -#DocumentTypeID ul input[type="radio"] { display: none; } -#DocumentTypeID ul li { display: inline-block; padding: 0; width: 90px; margin-right: -1px; border-radius: 0; } -#DocumentTypeID ul li.val1 { width: 130px; } -#DocumentTypeID ul li.val1 label { max-width: 105px; } -#DocumentTypeID ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } -#DocumentTypeID ul li:last-child { border-radius: 0 6px 6px 0; } -#DocumentTypeID ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } -#DocumentTypeID ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } -#DocumentTypeID ul li label { padding: .4em 1em; display: inline-block; line-height: 1.4; white-space: normal; max-width: 60px; } +#DocumentTypeID .middleColumn { overflow: auto; min-width: 800px; } +#DocumentTypeID .middleColumn ul { padding: 0; } +#DocumentTypeID .middleColumn ul input[type="radio"] { display: none; } +#DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } +#DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } +#DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } +#DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } +#DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } #Actions { box-shadow: none; border: none; padding: 0; } #Actions li { margin-left: 2px; } #Actions li:first-child { margin-left: 0; } #Actions li.delete-button-appended { display: inline-block; position: relative; margin-left: 0; } #Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } -#Actions li.dms-active:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; } +#Actions li.dms-active:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; } #ActionsPanel .middleColumn { margin-left: 184px; width: 510px; } form.small #ActionsPanel .middleColumn { margin-left: 120px; } diff --git a/css/DMSMainCMS.css b/css/DMSMainCMS.css index 56209b3..ac74326 100644 --- a/css/DMSMainCMS.css +++ b/css/DMSMainCMS.css @@ -1,14 +1,14 @@ .ui-autocomplete { border: 1px solid #DDD; box-shadow: 0 1px 2px 0px #AFAFAF; max-height: 300px; overflow: scroll; } -#Root_Documents { padding-left: 0; } -#Root_Documents table { white-space: normal; } -#Root_Documents table th.col-action_SetOrderTitle, #Root_Documents table th.col-FilenameWithoutID { width: 300px; } -#Root_Documents table td { white-space: normal; } -#Root_Documents table td.col-buttons { white-space: nowrap; } -#Root_Documents table td.col-buttons .dms-delete-link-only .ui-icon { background: url(../images/chain-unchain.png) no-repeat; } -#Root_Documents table tr.dms-document-hidden-row.odd { background-color: rgba(241, 220, 222, 0.6); } -#Root_Documents table tr.dms-document-hidden-row.even { background-color: rgba(242, 201, 203, 0.675); } -#Root_Documents table tr.dms-document-hidden-row:hover { background-color: rgba(244, 171, 172, 0.8) !important; } +#Root_Documents, #Root_RelatedLinks { padding-left: 0; } +#Root_Documents table, #Root_RelatedLinks table { white-space: normal; } +#Root_Documents table th.col-action_SetOrderTitle, #Root_Documents table th.col-FilenameWithoutID, #Root_RelatedLinks table th.col-action_SetOrderTitle, #Root_RelatedLinks table th.col-FilenameWithoutID { width: 300px; } +#Root_Documents table td, #Root_RelatedLinks table td { white-space: normal; } +#Root_Documents table td.col-buttons, #Root_RelatedLinks table td.col-buttons { white-space: nowrap; } +#Root_Documents table td.col-buttons .dms-delete-link-only .ui-icon, #Root_RelatedLinks table td.col-buttons .dms-delete-link-only .ui-icon { background: url(../images/chain-unchain.png) no-repeat; } +#Root_Documents table tr.dms-document-hidden-row.odd, #Root_RelatedLinks table tr.dms-document-hidden-row.odd { background-color: rgba(241, 220, 222, 0.6); } +#Root_Documents table tr.dms-document-hidden-row.even, #Root_RelatedLinks table tr.dms-document-hidden-row.even { background-color: rgba(242, 201, 203, 0.675); } +#Root_Documents table tr.dms-document-hidden-row:hover, #Root_RelatedLinks table tr.dms-document-hidden-row:hover { background-color: rgba(244, 171, 172, 0.8) !important; } .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; } .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li { padding-bottom: 1px; border: 1px solid #C0C0C2; } @@ -35,3 +35,25 @@ #Form_EditForm_Documents { padding: 1em 0; } #Form_EditForm_Documents input[name="filter[LastChanged]"] { display: none; } + +#Form_EditForm_RelatedLinks table { padding: 1em 0; } +#Form_EditForm_RelatedLinks table thead h2 { display: none; } + +#LinkSectionID .middleColumn { overflow: auto; min-width: 800px; } +#LinkSectionID .middleColumn ul { padding: 0; } +#LinkSectionID .middleColumn ul input[type="radio"] { display: none; } +#LinkSectionID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } +#LinkSectionID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } +#LinkSectionID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } +#LinkSectionID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#LinkSectionID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } +#LinkSectionID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } + +#Form_ItemEditForm h3:first-child { display: inline-block; float: left; } +#Form_ItemEditForm ul.SelectionGroup { display: inline-block; position: relative; padding: 0; margin-top: 9px; margin-left: 10px; } +#Form_ItemEditForm ul.SelectionGroup li { width: auto; clear: none; display: inline; margin-right: 4px; } +#Form_ItemEditForm ul.SelectionGroup li input.selector { display: none; } +#Form_ItemEditForm ul.SelectionGroup li label.ui-button { padding: 0.4em 0.8em; } +#Form_ItemEditForm ul.SelectionGroup li div.field { margin-left: 0px; margin-bottom: 1em; width: 600px; position: absolute; left: 0; margin-top: 13px; padding: 10px; background: white; border: 1px solid #B3B3B3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } +#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; } diff --git a/javascript/DMSGridField.js b/javascript/DMSGridField.js index 5429cbd..4f8c853 100644 --- a/javascript/DMSGridField.js +++ b/javascript/DMSGridField.js @@ -3,6 +3,43 @@ $.entwine('ss', function($) { + $('#Form_ItemEditForm ul.selectiongroup li').entwine({ + onadd: function() { + this.closest('ul').removeClass('ui-tabs-nav ui-widget-header'); + this.find('label').first().addClass('ui-button ss-ui-button ui-corner-all ui-state-default ui-widget ui-button-text-only'); + } + }); + + $('#Form_ItemEditForm ul.selectiongroup li input').entwine({ + onclick: function(){ + this.closest('ul').animate({height: '110px'}, 100); + } + }); + + $('#LinkSectionID ul li').entwine({ + onadd: function() { + this.addClass('ui-button ss-ui-button ui-corner-all ui-state-default ui-widget ui-button-text-only'); + this.parents('ul').removeClass('ui-tabs-nav'); + } + }); + + $('#LinkSectionID input[type=radio]').entwine({ + onadd: function() { + // Checks to see what radio button is selected + if (this.is(':checked')) { + this.change(); + } + }, + onchange: function(e) { + // Remove selected class from radio buttons + $('#LinkSectionID').find('li').removeClass('selected'); + //If radio button is checked then add the selected class + if (this.is(':checked')) { + this.parent('li').addClass('selected'); + } + } + }); + $('.ss-gridfield .action.dms-delete').entwine({ onclick: function(e){ //work out how many pages are left attached to this document diff --git a/scss/DMSDocumentCMSFields.scss b/scss/DMSDocumentCMSFields.scss index 0dba794..697aefb 100644 --- a/scss/DMSDocumentCMSFields.scss +++ b/scss/DMSDocumentCMSFields.scss @@ -1,5 +1,5 @@ @import "compass/css3"; - +@import '_mixins'; $color-button-generic: #e6e6e6 !default; @@ -40,54 +40,7 @@ form.small .field .TreeDropdownField, } #DocumentTypeID{ - ul{ - padding:0; - input[type="radio"]{ - display:none; - } - li{ - display:inline-block; - padding:0; - width:90px; - margin-right: -1px; - border-radius:0; - &.val1{ - width:130px; - label{ - max-width:105px; - } - } - &:first-child{ - border-radius: 6px 0 0 6px; - border-left: 1px solid #C0C0C2; - } - &:last-child{ - border-radius: 0 6px 6px 0; - } - &.selected{ - border-bottom:1px solid #C0C0C2; - @include background( - linear-gradient(color-stops( - darken($color-button-generic, 15%), - $color-button-generic - )) - ); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ - box-shadow: 0 1px 1px 0 #A0A0A0 inset; - :after{ - box-shadow: 0 1px 1px 0 #DDD; - } - } - label{ - padding: .4em 1em; - display: inline-block; - line-height: 1.4; - white-space:normal; - max-width:60px; - } - } - } + @include tabButtons; } #Actions{ box-shadow:none; @@ -104,32 +57,7 @@ form.small .field .TreeDropdownField, margin-left: 0; } &.dms-active{ - border-bottom:1px solid #C0C0C2; - @include background( - linear-gradient(color-stops( - darken($color-button-generic, 15%), - $color-button-generic - )) - ); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ - box-shadow: 0 1px 1px 0 #A0A0A0 inset; - &:after{ - content: ''; - display: block; - position: absolute; - top: 33px; - left: 50%; - margin-left: -6px; - width: 12px; - height: 12px; - background: #F8F8F8; - border-right: 1px solid #B3B3B3; - border-top: 1px solid #B3B3B3; - -moz-transform:rotate(-45deg); - -webkit-transform:rotate(-45deg); - pointer-events:none; - } + @include active-actions-btn; } } } diff --git a/scss/DMSMainCMS.scss b/scss/DMSMainCMS.scss index a310086..bcf3f54 100644 --- a/scss/DMSMainCMS.scss +++ b/scss/DMSMainCMS.scss @@ -1,3 +1,5 @@ +@import '_mixins'; + //data-icon="cross-circle" $gf_colour_zebra: #F0F4F7; @@ -8,7 +10,7 @@ $gf_colour_zebra: #F0F4F7; overflow: scroll; } -#Root_Documents{ +#Root_Documents, #Root_RelatedLinks{ padding-left: 0; table{ white-space:normal; @@ -88,7 +90,6 @@ $gf_colour_zebra: #F0F4F7; box-sizing: border-box; cursor:pointer; overflow:hidden; - //margin-bottom: 20px; } .treedropdownfield-toggle-panel-link{ padding: 5px 9px 9px; @@ -176,9 +177,73 @@ $gf_colour_zebra: #F0F4F7; } } -#Form_EditForm_Documents { +#Form_EditForm_Documents{ padding: 1em 0; input[name="filter[LastChanged]"] { display: none; } +} + +#Form_EditForm_RelatedLinks{ + table{ + padding: 1em 0; + thead{ + h2{ + display: none; + } + } + } +} + +#LinkSectionID{ + @include tabButtons; +} + +#Form_ItemEditForm{ + h3:first-child{ + display: inline-block; + float: left; + } + ul.SelectionGroup{ + //height: 90px; + display: inline-block; + position: relative; + padding: 0; + margin-top: 9px; + margin-left: 10px; + li{ + width: auto; + clear: none; + display: inline; + margin-right: 4px; + input{ + &.selector{ + display:none; + } + } + label{ + &.ui-button{ + padding: 0.4em 0.8em; + } + } + div.field{ + margin-left: 0px; + margin-bottom: 1em; + width: 600px; + position: absolute; + left:0; + margin-top: 13px; + padding: 10px; + background: white; + border: 1px solid #B3B3B3; + @include border-radius(4px); + @include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef)); + } + &.selected{ + label.ui-button{ + @include active-actions-btn; + } + } + } + } } \ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 0000000..c024bd6 --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,83 @@ +@import "compass/css3"; +$color-button-generic: #e6e6e6 !default; + + +@mixin tabButtons{ + .middleColumn{ + overflow:auto; + min-width: 800px; + ul{ + padding:0; + input[type="radio"]{ + display:none; + } + li{ + display:table; + padding: 0; + width:125px; + height:40px; + white-space:normal; + margin-right: -1px; + border-radius: 0; + &:first-child{ + border-radius: 6px 0 0 6px; + border-left: 1px solid #C0C0C2; + } + &:last-child{ + border-radius: 0 6px 6px 0; + } + &.selected{ + border-bottom:1px solid #C0C0C2; + @include background( + linear-gradient(color-stops( + darken($color-button-generic, 15%), + $color-button-generic + )) + ); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ + box-shadow: 0 1px 1px 0 #A0A0A0 inset; + :after{ + box-shadow: 0 1px 1px 0 #DDD; + } + } + label{ + display: table-cell; + vertical-align: middle; + text-align: center; + padding: 0 10px; + } + } + } + } +} + +@mixin active-actions-btn{ + border-bottom:1px solid #C0C0C2; + @include background( + linear-gradient(color-stops( + darken($color-button-generic, 15%), + $color-button-generic + )) + ); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ + box-shadow: 0 1px 1px 0 #A0A0A0 inset; + &:after{ + content: ''; + display: block; + position: absolute; + top: 33px; + left: 50%; + margin-left: -6px; + width: 12px; + height: 12px; + background: #F8F8F8; + border-right: 1px solid #B3B3B3; + border-top: 1px solid #B3B3B3; + -moz-transform:rotate(-45deg); + -webkit-transform:rotate(-45deg); + pointer-events:none; + z-index: 10; + } +} \ No newline at end of file