lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2026-02-09 09:16:41 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fixed an issue with the media item element not showing selected documents.

Browse Source 
The issue is that the media item element renders the selected media items with the Thumbnail display type.
The Media shape templates for that display type do not include necessary styling themselves; instead the media library picker UI includes the necessary stylesheet.
This commit is contained in:
Sipke Schoorstra
2015-03-26 12:43:15 +01:00
parent a97a7e26d5
commit 2c8f6aa2a6
7 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Orchard.Web/Modules/Orchard.Layouts/Module.txt
View File

@@ -10,7 +10,7 @@ Features:
Orchard.Layouts:
Name: Layouts
Description: Provides tools to create layouts.
Dependencies: Common, Orchard.jQuery, Orchard.Forms, Orchard.Tokens, TinyMCE
Dependencies: Common, Orchard.jQuery, Orchard.Forms, Orchard.Tokens, Orchard.MediaLibrary, TinyMCE
Category: Layout
Orchard.Layouts.Snippets:
Name: Layout Snippets

4
src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.css
View File

@@ -122,6 +122,10 @@
border: 2px dashed #648721 !important;
background-color: rgba(100, 135, 33, 0.16);
}
.layout-editor .media-thumbnail img {
max-width: 100%;
max-height: 100%;
}
.layout-editor .layout-container > .layout-element-wrapper > .layout-container-children-placeholder {
display: none;

2
src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Element.css
View File

@@ -102,3 +102,7 @@
border: 2px dashed #648721 !important;
background-color: rgba(100, 135, 33, 0.16);
}
.layout-editor .media-thumbnail img {
max-width: 100%;
max-height: 100%;
}

8
src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Element.less
View File

@@ -139,4 +139,12 @@
background-color: fade(@droptarget-highlight, 16%);
}
}
// A CSS fix for media item elements.
.media-thumbnail {
img {
max-width:100%;
max-height: 100%;
}
}
}

2
src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Element.min.css vendored
View File

@@ -1 +1 @@
.layout-editor .layout-element{position:relative;margin-top:0;margin-right:0;margin-bottom:0;padding:0}.layout-editor .layout-element:not(.layout-column){margin-left:0}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel{display:none;position:absolute;margin:0;z-index:20;height:25px;padding:0 6px;list-style:none;white-space:nowrap;line-height:25px;vertical-align:middle}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel>.layout-panel-item{display:inline-block;height:25px;padding:1px 6px 0}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel>.layout-panel-label{font-size:13px}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel>.layout-panel-action{display:none;width:28px;cursor:pointer;text-align:center}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel-main{top:-27px;left:-2px}.layout-editor li.layout-element{list-style:none}.layout-editor:not(.layout-editor-dragging) .layout-element-active,.layout-editor:not(.layout-editor-dragging) .layout-element-focused{border-width:2px;border-style:solid}.layout-editor:not(.layout-editor-dragging) .layout-element-active>.layout-element-wrapper,.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper{margin:-2px}.layout-editor:not(.layout-editor-dragging) .layout-element-active{border-color:rgba(104,104,104,.1)}.layout-editor:not(.layout-editor-dragging) .layout-element-active>.layout-element-wrapper>.layout-panel-main{display:block;z-index:30;background-color:rgba(104,104,104,.1)}.layout-editor:not(.layout-editor-dragging) .layout-element-focused{border-color:#648721}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel{display:block;background-color:#648721;color:#fefefe}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action{display:inline-block}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action:hover{background-color:#82b02b}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.disabled{cursor:default;color:rgba(254,254,254,.4)}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.disabled:hover{background-color:#648721}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.active{color:#deff42;background-color:#739b26}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.active:hover{background-color:#82b02b}.layout-editor:not(.layout-editor-dragging) .layout-element-selected{background-color:rgba(100,135,33,.08)}.layout-editor .ui-sortable-placeholder{display:none}.layout-editor .layout-element-droptarget{box-shadow:inset 0 0 12px 6px rgba(100,135,33,.5)}.layout-editor .layout-element-droptarget .ui-sortable-placeholder{display:block;visibility:visible !important;min-height:78px;border:2px dashed #648721 !important;background-color:rgba(100,135,33,.16)}
.layout-editor .layout-element{position:relative;margin-top:0;margin-right:0;margin-bottom:0;padding:0}.layout-editor .layout-element:not(.layout-column){margin-left:0}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel{display:none;position:absolute;margin:0;z-index:20;height:25px;padding:0 6px;list-style:none;white-space:nowrap;line-height:25px;vertical-align:middle}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel>.layout-panel-item{display:inline-block;height:25px;padding:1px 6px 0}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel>.layout-panel-label{font-size:13px}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel>.layout-panel-action{display:none;width:28px;cursor:pointer;text-align:center}.layout-editor .layout-element>.layout-element-wrapper>.layout-panel-main{top:-27px;left:-2px}.layout-editor li.layout-element{list-style:none}.layout-editor:not(.layout-editor-dragging) .layout-element-active,.layout-editor:not(.layout-editor-dragging) .layout-element-focused{border-width:2px;border-style:solid}.layout-editor:not(.layout-editor-dragging) .layout-element-active>.layout-element-wrapper,.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper{margin:-2px}.layout-editor:not(.layout-editor-dragging) .layout-element-active{border-color:rgba(104,104,104,.1)}.layout-editor:not(.layout-editor-dragging) .layout-element-active>.layout-element-wrapper>.layout-panel-main{display:block;z-index:30;background-color:rgba(104,104,104,.1)}.layout-editor:not(.layout-editor-dragging) .layout-element-focused{border-color:#648721}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel{display:block;background-color:#648721;color:#fefefe}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action{display:inline-block}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action:hover{background-color:#82b02b}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.disabled{cursor:default;color:rgba(254,254,254,.4)}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.disabled:hover{background-color:#648721}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.active{color:#deff42;background-color:#739b26}.layout-editor:not(.layout-editor-dragging) .layout-element-focused>.layout-element-wrapper>.layout-panel>.layout-panel-action.active:hover{background-color:#82b02b}.layout-editor:not(.layout-editor-dragging) .layout-element-selected{background-color:rgba(100,135,33,.08)}.layout-editor .ui-sortable-placeholder{display:none}.layout-editor .layout-element-droptarget{box-shadow:inset 0 0 12px 6px rgba(100,135,33,.5)}.layout-editor .layout-element-droptarget .ui-sortable-placeholder{display:block;visibility:visible !important;min-height:78px;border:2px dashed #648721 !important;background-color:rgba(100,135,33,.16)}.layout-editor .media-thumbnail img{max-width:100%;max-height:100%}

6
src/Orchard.Web/Modules/Orchard.Layouts/Views/EditorTemplates/LayoutEditor.cshtml
View File

@@ -5,6 +5,12 @@
Style.Require("jQueryUI_Orchard");
Style.Include("Lib/font-awesome.css", "Lib/font-awesome.min.css");
Style.Include("Lib/Bootstrap/bootstrap.css", "Lib/Bootstrap/bootstrap.min.css");
// We need these styles to properly render selected media items.
// Ideally the MediaLibrary is refactored such that each media item type provides its own set of styles, enabling extensibility of the set of media item types.
// In turn we could get rid of this cross-module reference.
Style.Include("~/Modules/Orchard.MediaLibrary/Styles/media-library-picker-admin.css");
Script.Require("jQueryCookie");
Script.Require("jQueryUI_Draggable");
Script.Require("jQueryUI_Droppable");