mirror of
https://github.com/silverstripe/silverstripe-dms
synced 2024-10-22 14:05:56 +02:00
ENHANCEMENT: Refactor linking a document. This fixes the bug issue Branka was having in FF as well as making the UI work better
This commit is contained in:
Ryan O'Hara
parent
12fe7d74fd
commit
11180da4ac
@ -23,7 +23,7 @@ class DocumentHtmlEditorFieldToolbar extends Extension {
|
||||
$addExistingField = new DMSDocumentAddExistingField('AddExisting', 'Add Existing');
|
||||
$addExistingField->setForm($form);
|
||||
$addExistingField->setUseFieldClass(false);
|
||||
$fieldList->insertAfter($addExistingField,'Locale');
|
||||
$fieldList->insertAfter($addExistingField,'Description');
|
||||
|
||||
// Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/behaviour/behaviour.js");
|
||||
// Requirements::javascript(SAPPHIRE_DIR . "/javascript/tiny_mce_improvements.js");
|
||||
|
||||
@ -14,10 +14,10 @@
|
||||
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li { padding-bottom: 1px; border: 1px solid #C0C0C2; }
|
||||
.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li a { padding: 8px 20px 8px; }
|
||||
|
||||
.ss-add .document-add-existing input { position: absolute; z-index: 9999; width: 390px; padding: 9px 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; outline: none; box-sizing: border-box; }
|
||||
.ss-add .document-add-existing input { position: absolute; z-index: 9999; width: 390px; padding: 9px 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; }
|
||||
.ss-add .document-add-existing input[disabled] { color: #C0C0C2; text-shadow: 0 -1px 0 white; background: #EEE; background-image: none; box-shadow: inset 0 1px 8px 0 #C4C4C4; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
||||
.ss-add .document-add-existing .TreeDropdownField { border: none; width: 100%; max-width: 512px; box-sizing: border-box; cursor: pointer; overflow: hidden; }
|
||||
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; border: 1px solid #B3B3B3; float: right; }
|
||||
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; border: 1px solid #B3B3B3; float: right; z-index: 99999; position: relative; }
|
||||
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree { background: transparent; border: 1px solid #B3B3B3; border-bottom: none; border-bottom-right-radius: 0; }
|
||||
.ss-add .document-add-existing .treedropdownfield-title { width: auto; }
|
||||
.ss-add .document-add-existing .treedropdownfield-toggle-panel-link a { display: inline-block; top: 4px; position: relative; }
|
||||
@ -26,6 +26,11 @@
|
||||
.ss-add .document-add-existing .document-list ul li { line-height: 18px; }
|
||||
.ss-add .document-add-existing .document-list ul li a { display: block; padding: 4px 8px; border: 1px solid #FFF; color: black; }
|
||||
.ss-add .document-add-existing .document-list ul li a:hover { border: 1px solid #CCC; border-radius: 4px; background: rgba(203, 203, 203, 0.4); cursor: pointer; text-decoration: none; outline: none; text-shadow: none; }
|
||||
.ss-add .document-add-existing.link-editor-context label { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; }
|
||||
.ss-add .document-add-existing.link-editor-context .middleColumn { margin-left: 184px; }
|
||||
.ss-add .document-add-existing.link-editor-context .middleColumn input { background: white; border: 1px solid #B3B3B3; line-height: 16px; margin: 0; border-radius: 4px; background-size: 100%; max-width: 512px; }
|
||||
.ss-add .ss-assetuploadfield.link-editor-context label { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; }
|
||||
.ss-add .ss-assetuploadfield.link-editor-context .middleColumn { margin-left: 184px; display: block; padding: 8px 8px 8px 0; font-style: italic; min-height: 20px; }
|
||||
|
||||
.cms .ss-add .treedropdownfield-panel, .cms .selectiongroup .treedropdownfield-panel { margin: -1px 0 0 0; box-sizing: border-box; }
|
||||
.cms .ss-add .treedropdownfield-panel ul, .cms .selectiongroup .treedropdownfield-panel ul { padding: 4px 0; }
|
||||
|
||||
@ -73,6 +73,7 @@ $gf_colour_zebra: #F0F4F7;
|
||||
border-top-right-radius:0;
|
||||
outline:none;
|
||||
box-sizing:border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
&[disabled]{
|
||||
color: #C0C0C2;
|
||||
text-shadow: 0 -1px 0 #FFF;
|
||||
@ -95,6 +96,8 @@ $gf_colour_zebra: #F0F4F7;
|
||||
padding: 5px 9px 9px;
|
||||
border: 1px solid #B3B3B3;
|
||||
float: right;
|
||||
z-index: 99999;
|
||||
position: relative;
|
||||
&.treedropdownfield-open-tree{
|
||||
background:transparent;
|
||||
border: 1px solid #B3B3B3;
|
||||
@ -145,6 +148,49 @@ $gf_colour_zebra: #F0F4F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.link-editor-context{
|
||||
label{
|
||||
float: left;
|
||||
display: block;
|
||||
width: 176px;
|
||||
padding:8px 8px 8px 0;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 0 white;
|
||||
}
|
||||
.middleColumn{
|
||||
margin-left: 184px;
|
||||
input{
|
||||
background:white;
|
||||
border: 1px solid #B3B3B3;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
background-size: 100%;
|
||||
max-width: 512px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-assetuploadfield{
|
||||
&.link-editor-context{
|
||||
label{
|
||||
float: left;
|
||||
display: block;
|
||||
width: 176px;
|
||||
padding:8px 8px 8px 0;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 0 white;
|
||||
}
|
||||
.middleColumn{
|
||||
margin-left: 184px;
|
||||
display: block;
|
||||
padding: 8px 8px 8px 0;
|
||||
font-style: italic;
|
||||
min-height:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,41 +1,65 @@
|
||||
<div class="ss-add">
|
||||
<div class="document-add-existing <% if useFieldContext %>field<% else %>link-editor-context<% end_if %>">
|
||||
|
||||
<% if useFieldContext %>
|
||||
<h3>
|
||||
<% else %>
|
||||
<div class="step3">
|
||||
<% end_if %>
|
||||
<span class="step-label">
|
||||
<% if useFieldContext %>
|
||||
<span class="flyout">1</span><span class="arrow"></span>
|
||||
<strong class="title">Link a Document</strong>
|
||||
<% else %>
|
||||
<span class="flyout">3</span><span class="arrow"></span>
|
||||
<% end_if %>
|
||||
<span class="title">Link a Document</span>
|
||||
</span>
|
||||
<% if useFieldContext %>
|
||||
</h3>
|
||||
<% else %>
|
||||
</div>
|
||||
<% end_if %>
|
||||
|
||||
<% if useFieldContext %>
|
||||
<% else %>
|
||||
<label>Link a Document</label>
|
||||
<div class="middleColumn">
|
||||
<% end_if %>
|
||||
|
||||
<input class="document-autocomplete text" type="text" placeholder="Search by ID or filename" />
|
||||
<!-- <span>or Add from page</span> -->
|
||||
$fieldByName(PageSelector)
|
||||
|
||||
<div class="document-list">
|
||||
<div class="document-list"></div>
|
||||
|
||||
<% if useFieldContext %>
|
||||
<% else %>
|
||||
</div>
|
||||
<% end_if %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ss-assetuploadfield">
|
||||
<h3>
|
||||
<div class="ss-assetuploadfield <% if useFieldContext %>field<% else %>link-editor-context<% end_if %>">
|
||||
<div class="step4">
|
||||
<span class="step-label">
|
||||
<% if useFieldContext %>
|
||||
<span class="flyout">2</span><span class="arrow"></span>
|
||||
<span class="title">Edit Document Details</span>
|
||||
<% else %>
|
||||
<span class="flyout">4</span><span class="arrow"></span>
|
||||
<span class="title">Selected Document</span>
|
||||
<label>Selected Document</strong>
|
||||
<% end_if %>
|
||||
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<!-- <div class="fileOverview"></div> -->
|
||||
|
||||
<% if useFieldContext %>
|
||||
<% else %>
|
||||
<div class="middleColumn">
|
||||
<% end_if %>
|
||||
<ul class="files ss-uploadfield-files ss-add-files"></ul>
|
||||
<% if useFieldContext %>
|
||||
<% else %>
|
||||
</div>
|
||||
<% end_if %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user