diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css index a4df81a8..aa1589f3 100755 --- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css +++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css @@ -1 +1 @@ -.InputfieldImage .InputfieldHeader .InputfieldImageListToggle{float:right;padding-right:.75em;position:relative}.InputfieldImage .InputfieldHeader .InputfieldImageListToggle--active{opacity:.5}.InputfieldImage .InputfieldHeader .InputfieldImageListToggle:first-child{padding-right:1em}.InputfieldImage .InputfieldHeader .InputfieldImageSizeSlider{float:right;width:100px;position:relative;top:8px;right:1em}.InputfieldImage .InputfieldHeader .InputfieldImageSizeSlider .ui-slider-handle{outline:none}.InputfieldImage.InputfieldFileEmpty .InputfieldImageListToggle,.InputfieldImage.InputfieldFileEmpty .InputfieldImageSizeSlider,.InputfieldImage.InputfieldStateCollapsed .InputfieldImageListToggle,.InputfieldImage.InputfieldStateCollapsed .InputfieldImageSizeSlider{display:none}.InputfieldImageErrors{padding-left:0;margin-left:0}.InputfieldImageErrors li{margin-bottom:.5em;margin-top:0;color:#fff;background-color:#fc3a3f;padding:.3em .5em}.gridImages{list-style:none;padding-left:0;position:relative;margin:0;margin-right:-0.6em;display:block;list-style:none}.gridImage .gridImage__overflow,.InputfieldImageEditAll .gridImage .gridImage__overflow img,.InputfieldImageEdit__image{background-color:#fefefe;background-image:linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);background-size:16px 16px;background-position:0 0,8px 8px}.gridImage{list-style:none;position:relative;display:inline-block;box-shadow:0 1px 3px rgba(0,0,0,.2);border-radius:2px;background:#fff;padding:.4em;vertical-align:top;border:1px dashed transparent}li.gridImage{display:inline-block;margin:0 .6em .6em 0}.gridImage__overflow{width:100%;height:100%;overflow:hidden;position:relative}.gridImage__overflow>img{position:absolute;top:50%;left:50%;-ms-transform:translate3d(-50%, -50%, 0);transform:translate3d(-50%, -50%, 0)}.gridImage.gridImagePlaceholder .gridImage__overflow{background:#fff}.gridImage.ui-sortable-placeholder{display:inline-block;border-radius:2px;border:1px dashed #ccc;padding:.4em;visibility:visible !important;vertical-align:top;background-color:transparent;box-shadow:none}.gridImage.ui-sortable-placeholder::after{content:" ";display:block}.gridImage__hover{position:absolute;top:0;left:0;width:100%;height:100%;padding:.4em}.gridImage__inner{position:relative;width:100%;height:100%}.gridImage:hover .gridImage__inner{background:rgba(62,185,152,.7)}.gridImage__resize{position:absolute;display:block;height:100%;width:100%;line-height:130px;text-align:center;color:#fff;font-size:1.3em;cursor:move;text-shadow:0 0 7px rgba(62,185,152,.7)}.gridImage__resize.pw-resizing{text-shadow:none;background:rgba(0,0,0,.7)}.gridImage__progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:#3eb998;width:100%;height:10px;background:transparent;position:absolute;bottom:0;left:0}.gridImage__progress::-webkit-progress-bar{background-color:inherit}.gridImage__progress[value]::-webkit-progress-value{background-color:#3eb998}.gridImage__progress[value]::-moz-progress-bar{background-color:#3eb998}.gridImage__progress[value="-1"]{background-color:#e83561}.gridImage__trash{position:absolute;background:#fff;padding:.2em .6em;color:#aaa;z-index:2;cursor:pointer}label.gridImage__trash{display:none}.gridImage__trash--single{display:block !important;position:static}.gridImage__trash>input{display:none}.gridImage:hover .gridImage__trash{display:block}.gridImage:hover label.gridImage__trash:hover{display:block;color:#e83561;background-color:#fff}.gridImage__edit{position:absolute;display:block;height:100%;width:100%;line-height:130px;text-align:center;color:#fff !important;font-size:1.3em;cursor:move;text-shadow:0 0 7px rgba(62,185,152,.7);display:none}.gridImage__edit span{cursor:pointer}.gridImage:hover .gridImage__edit{display:block}.gridImage__edit:hover{color:#fff}.gridImage__tooltip{pointer-events:none;position:absolute;bottom:100%;padding:20px;-webkit-filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));left:50%;transform:translate(-50%, 0);margin-bottom:12px;background:#fff;z-index:110;box-shadow:0 0 1px rgba(0,0,0,.25);opacity:0;transition:opacity .2s 2}.gridImage:hover .gridImage__tooltip{display:block;opacity:1;transition:opacity .2s 1s}.InputfieldImageSorting .gridImage__tooltip{display:none !important}.gridImage__tooltip input{pointer-events:none}.gridImage__tooltip table{margin:0;border-spacing:10px 0;border-collapse:separate}.gridImage__tooltip table th{color:#000;font-weight:bold;text-align:right}.gridImage__tooltip table th,.gridImage__tooltip table td{border:none !important;background:#fff !important}.gridImage__tooltip:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-top-color:#fff;border-width:10px;margin-left:-10px}.gridImage.gridImageEditing .gridImage__inner{background:rgba(62,185,152,.5)}.gridImage--active{background-color:#3eb998}.gridImage--active .gridImage__inner{background:rgba(62,185,152,.5)}.gridImage--active .gridImage__trash{background-color:#3eb998;color:#fff}.gridImage--active .gridImage__trash:hover{background-color:#3eb998}.gridImage--active:hover .gridImage__trash:hover{background-color:#3eb998}.gridImage--delete{background-color:#e83561}.InputfieldImageEditSingle.gridImage--delete{background-color:transparent}.InputfieldImageEditSingle.gridImage--delete .InputfieldImageEdit__inner{outline:3px solid #e83561}.gridImage--delete .gridImage__trash{background-color:#e83561;color:#fff;display:block}.gridImage--delete .gridImage__trash:hover{background-color:#e83561}.gridImage--delete:hover .gridImage__edit{display:none}.gridImage--delete:hover .gridImage__trash:hover{background-color:#e83561}.gridImage--delete:hover .gridImage__inner{background:rgba(232,53,97,.3)}.InputfieldImageEdit{position:relative;display:none}.InputfieldImageEdit--active,.InputfieldImageEditSingle{display:block}.InputfieldImageEdit__core{margin-bottom:.5em}.InputfieldImageEdit__inner{position:relative;display:flex;flex-flow:row;margin:1em .6em 1em 0;-webkit-filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));background-color:#fff}.InputfieldImageEdit__close{cursor:pointer;position:absolute;font-size:1.4em;right:.5em;top:0;color:#ccc !important;text-decoration:none !important}.InputfieldFileSingle .InputfieldImageEdit__close{display:none}.InputfieldImageEdit__trash-single{cursor:pointer;position:absolute;font-size:1.4em;right:0;top:0;color:#aaa !important;text-decoration:none !important}.InputfieldImageEdit__trash-single:hover{color:#e83561}.InputfieldImageEdit__arrow{bottom:100%;content:" ";height:0;width:0;position:absolute;pointer-events:none;border:.5em solid rgba(255,255,255,0);border-bottom-color:#fff;transform:translate(-50%, 0)}.InputfieldImageEdit__imagewrapper{display:inline-block;display:flex;vertical-align:top;justify-content:space-around;width:300px;border-right:1px solid #eee;min-height:1em;padding:20px}.InputfieldImageEdit__imagewrapper>div{width:100%;position:relative}.InputfieldImageEdit__imagewrapper .detail{text-align:center;margin-top:2px}.InputfieldImageEdit__imagewrapper .detail-upload{display:block;opacity:0}.InputfieldImageEdit__imagewrapper .detail-focus{display:none}.InputfieldImageEdit__imagewrapper:hover .detail-upload{opacity:.7}.InputfieldImageEdit__imagewrapper>div.focusWrap .detail-upload{display:none}.InputfieldImageEdit__imagewrapper>div.focusWrap .detail-focus{display:block;opacity:.7}.InputfieldImageEdit__replace img{opacity:.5}.InputfieldImageEdit__edit{display:inline-block;vertical-align:top;min-height:100%;padding:20px;flex-grow:1}.InputfieldImageEdit__edit .InputfieldFileDescription input,.InputfieldImageEdit__edit .InputfieldFileTags input{width:100%}.InputfieldImageEdit__image{position:relative;margin:0 auto;height:auto;cursor:zoom-in;max-width:100%}.InputfieldImageEdit__name{font-weight:bold;display:inline-block;margin-right:.5em !important;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;cursor:pointer}.InputfieldImageEdit__info{font-size:.9em;color:#ccc;white-space:nowrap}.InputfieldImageEdit__buttons{margin:1em 0 .5em 0}.InputfieldImageEdit__buttons button{margin-bottom:.5em}.InputfieldImageEdit .InputfieldFileDescription+.InputfieldFileTags{margin-top:.5em}.gridImage__overflow .focusArea,.InputfieldImageEdit .focusArea{display:none;position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;cursor:default}.gridImage__overflow .focusArea.focusActive,.InputfieldImageEdit .focusArea.focusActive{display:block;overflow:hidden}.gridImage__overflow .focusArea .focusCircle,.InputfieldImageEdit .focusArea .focusCircle{cursor:move;width:40px;height:40px;margin:-20px !important;border:3px solid #eb1d61;border-radius:50%;background-color:rgba(255,255,255,.6);background-image:url(data:image/gif;base64,R0lGODlhBAAEAIAAAOsdYQAAACH5BAAAAAAALAAAAAAEAAQAAAIEhI8JBQA7);background-position:15px 15px;background-repeat:no-repeat}.InputfieldImage .ImageData{display:none}.InputfieldImageValidExtensions{margin-left:1em}.InputfieldImageUpload{position:relative;margin:1em 0 0}.InputfieldImageUpload .AjaxUploadDropHere{display:none;position:absolute;top:0;right:0;opacity:.75;cursor:pointer}.ie-no-drop .InputfieldImageUpload .AjaxUploadDropHere{display:none;visibility:hidden}.InputfieldImageUpload .InputfieldImageRefresh{margin-bottom:0}.AdminThemeUikit .InputfieldImageValidExtensions{position:relative;top:-15px}.InputfieldImageNarrow .InputfieldHeader .InputfieldImageSizeSlider{width:50px}.InputfieldImageNarrow .InputfieldImageEdit__inner{display:block;padding-top:.5em}.InputfieldImageNarrow .InputfieldImageEdit__imagewrapper{display:block;width:100%;padding-bottom:0}.InputfieldImageNarrow .InputfieldImageEdit__edit{width:100%;padding-top:0}.InputfieldImageNarrow .InputfieldImageEdit__edit .InputfieldImageEdit__buttons,.InputfieldImageNarrow .InputfieldImageEdit__edit .InputfieldImageEdit__info{display:block;text-align:center}.InputfieldImageNarrow .InputfieldImageEdit__name{margin:0;display:block;text-align:center}.InputfieldImageNarrow .InputfieldImageUpload .AjaxUploadDropHere{display:none !important}.InputfieldFileSingle .gridImages .gridImage img,.InputfieldRenderValueMode .gridImages .gridImage img{cursor:zoom-in}.InputfieldImageEditAll .gridImage{display:block;width:100%}.InputfieldImageEditAll .gridImage:before,.InputfieldImageEditAll .gridImage:after{content:"";display:table;border-collapse:collapse}.InputfieldImageEditAll .gridImage:after{clear:both}.InputfieldImageEditAll .gridImage__overflow{position:relative;z-index:2;top:0;left:0;float:left;background:none;display:block;height:auto !important;width:23%;overflow:visible;cursor:move;padding:10px;padding-right:0}.InputfieldImageEditAll .gridImage__overflow>img{display:block;position:static !important;top:0;left:0;transition:none;-ms-transform:none;transform:none;width:100%;max-width:100% !important;height:initial !important;cursor:move}.InputfieldImageEditAll .gridImage__overflow>.focusArea{position:absolute;top:10px;left:10px}.InputfieldImageEditAll .gridImage .ImageData{position:relative;float:left;display:block;width:77%;padding-left:20px;padding-right:10px;z-index:3}.InputfieldImageEditAll .gridImage .ImageData .InputfieldFileDescription{margin-bottom:.5em}.InputfieldImageEditAll .gridImage .ImageData .InputfieldImageEdit__name{margin-bottom:0;margin-top:1em;position:relative;z-index:100;cursor:pointer}.InputfieldImageEditAll .gridImage .ImageData .InputfieldFileSort{display:none}.InputfieldImageEditAll .gridImage .ImageData input{position:relative;z-index:4}.InputfieldImageEditAll .gridImage.gridImagePlaceholder .gridImage__overflow{background:#fff}.InputfieldImageEditAll .gridImage__inner .gridImage__edit{display:none}.InputfieldImageEditAll .gridImage:hover .gridImage__inner{background:none}.InputfieldImageEditAll .gridImage .InputfieldImageEdit__core input{width:100%}.InputfieldImageEditAll .gridImage__resize{margin-top:10px;color:#e83561;text-shadow:none}.InputfieldImageEditAll .gridImage__progress{bottom:10px;margin-left:10px}.InputfieldImageEditAll .gridImage.gridImageUploading .gridImage__overflow{margin-bottom:10px}.InputfieldImageEditAll .gridImage.gridImageUploading .gridImage__inner{overflow:hidden}.InputfieldImageEditAll .gridImage__trash{z-index:5;display:block !important;top:0;right:0}.InputfieldImageEditAll .gridImage__edit{display:none}.InputfieldImageEditAll .gridImage__tooltip{display:none !important}.InputfieldImageEditAll .gridImage--delete{background-color:#e83561;border-bottom:8px solid transparent;height:45px;overflow:hidden}.InputfieldImageEditAll .gridImage--delete .gridImage__overflow{display:none}.InputfieldImageEditAll .gridImage--delete .ImageData{padding-left:10px;width:100%}.InputfieldImageEditAll .gridImage--delete .ImageData .InputfieldImageEdit__name{color:rgba(255,255,255,.6);margin-top:3px;text-decoration:line-through}.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__info{color:rgba(255,255,255,.4)}.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__buttons,.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__core,.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__additional{display:none}.InputfieldImageEditAll .gridImage--delete:hover .gridImage__trash:hover{color:#fff;background-color:#e83561}.InputfieldImageEditAll .gridImage--delete:hover .gridImage__hover,.InputfieldImageEditAll .gridImage--delete .gridImage__hover{background:rgba(255,255,255,0)}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage__overflow{display:block;width:100% !important;height:auto !important;padding:0}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage__overflow img{width:100% !important;height:auto !important}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage__overflow>.focusArea{top:0;left:0}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData{padding:0;width:100% !important;display:block}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__name{margin-top:.5em}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__name,.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__buttons,.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__info{text-align:center;display:block}.InputfieldFileActionNote{display:none;white-space:nowrap} +.InputfieldImage .InputfieldHeader .InputfieldImageListToggle{float:right;padding-right:.75em;position:relative}.InputfieldImage .InputfieldHeader .InputfieldImageListToggle--active{opacity:.5}.InputfieldImage .InputfieldHeader .InputfieldImageListToggle:first-child{padding-right:1em}.InputfieldImage .InputfieldHeader .InputfieldImageSizeSlider{float:right;width:100px;position:relative;top:8px;right:1em}.InputfieldImage .InputfieldHeader .InputfieldImageSizeSlider .ui-slider-handle{outline:none}.InputfieldImage.InputfieldFileEmpty .InputfieldImageListToggle,.InputfieldImage.InputfieldFileEmpty .InputfieldImageSizeSlider,.InputfieldImage.InputfieldStateCollapsed .InputfieldImageListToggle,.InputfieldImage.InputfieldStateCollapsed .InputfieldImageSizeSlider{display:none}.InputfieldImageErrors{padding-left:0;margin-left:0}.InputfieldImageErrors li{margin-bottom:.5em;margin-top:0;color:#fff;background-color:#fc3a3f;padding:.3em .5em}.gridImages{list-style:none;padding-left:0;position:relative;margin:0;margin-right:-0.6em;display:block;list-style:none}.gridImage .gridImage__overflow,.InputfieldImageEditAll .gridImage .gridImage__overflow img,.InputfieldImageEdit__image{background-color:#fefefe;background-image:linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);background-size:16px 16px;background-position:0 0,8px 8px}.gridImage{list-style:none;position:relative;display:inline-block;box-shadow:0 1px 3px rgba(0,0,0,.2);border-radius:2px;background:#fff;padding:.4em;vertical-align:top;border:1px dashed transparent}li.gridImage{display:inline-block;margin:0 .6em .6em 0}.gridImage__overflow{width:100%;height:100%;overflow:hidden;position:relative}.gridImage__overflow>img{position:absolute;top:50%;left:50%;-ms-transform:translate3d(-50%, -50%, 0);transform:translate3d(-50%, -50%, 0)}.gridImage.gridImagePlaceholder .gridImage__overflow{background:#fff}.gridImage.ui-sortable-placeholder{display:inline-block;border-radius:2px;border:1px dashed #ccc;padding:.4em;visibility:visible !important;vertical-align:top;background-color:transparent;box-shadow:none}.gridImage.ui-sortable-placeholder::after{content:" ";display:block}.gridImage__hover{position:absolute;top:0;left:0;width:100%;height:100%;padding:.4em}.gridImage__inner{position:relative;width:100%;height:100%}.gridImage:hover .gridImage__inner{background:rgba(62,185,152,.7)}.gridImage__resize{position:absolute;display:block;height:100%;width:100%;line-height:130px;text-align:center;color:#fff;font-size:1.3em;cursor:move;text-shadow:0 0 7px rgba(62,185,152,.7)}.gridImage__resize.pw-resizing{text-shadow:none;background:rgba(0,0,0,.7)}.gridImage__progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:#3eb998;width:100%;height:10px;background:transparent;position:absolute;bottom:0;left:0}.gridImage__progress::-webkit-progress-bar{background-color:inherit}.gridImage__progress[value]::-webkit-progress-value{background-color:#3eb998}.gridImage__progress[value]::-moz-progress-bar{background-color:#3eb998}.gridImage__progress[value="-1"]{background-color:#e83561}.gridImage__btn{position:relative;float:left;background:#fff;padding:.2em .6em;color:#aaa;z-index:2;cursor:pointer}.gridImage .gridImage__btn{display:none}.gridImage__btn--single{display:block !important;position:static}.gridImage__btn>input{display:none}.gridImage:hover .gridImage__btn{display:block}.gridImage:hover .gridImage__btn:hover{display:block;color:#e83561;background-color:#fff}.gridImage__edit{position:absolute;display:block;height:100%;width:100%;line-height:130px;text-align:center;color:#fff !important;font-size:1.3em;cursor:move;text-shadow:0 0 7px rgba(62,185,152,.7);display:none}.gridImage__edit span{cursor:pointer}.gridImage:hover .gridImage__edit{display:block}.gridImage__edit:hover{color:#fff}.gridImage__tooltip{pointer-events:none;position:absolute;bottom:100%;padding:20px;-webkit-filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));left:50%;transform:translate(-50%, 0);margin-bottom:12px;background:#fff;z-index:110;box-shadow:0 0 1px rgba(0,0,0,.25);opacity:0;transition:opacity .2s 2}.gridImage:hover .gridImage__tooltip{display:block;opacity:1;transition:opacity .2s 1s}.InputfieldImageSorting .gridImage__tooltip{display:none !important}.gridImage__tooltip input{pointer-events:none}.gridImage__tooltip table{margin:0;border-spacing:10px 0;border-collapse:separate}.gridImage__tooltip table th{color:#000;font-weight:bold;text-align:right}.gridImage__tooltip table th,.gridImage__tooltip table td{border:none !important;background:#fff !important}.gridImage__tooltip:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-top-color:#fff;border-width:10px;margin-left:-10px}.gridImage.gridImageEditing .gridImage__inner{background:rgba(62,185,152,.5)}.gridImage--active{background-color:#3eb998}.gridImage--active .gridImage__inner{background:rgba(62,185,152,.5)}.gridImage--active .gridImage__btn{background-color:#3eb998;color:#fff}.gridImage--active .gridImage__btn:hover{background-color:#3eb998}.gridImage--active:hover .gridImage__btn:hover{background-color:#3eb998}.gridImage--delete{background-color:#e83561}.InputfieldImageEditSingle.gridImage--delete{background-color:transparent}.InputfieldImageEditSingle.gridImage--delete .InputfieldImageEdit__inner{outline:3px solid #e83561}.gridImage--delete .gridImage__trash{background-color:#e83561;color:#fff;display:block}.gridImage--delete .gridImage__trash:hover{background-color:#e83561}.gridImage--delete:hover .gridImage__edit{display:none}.gridImage--delete:hover .gridImage__trash:hover{background-color:#e83561;color:#fff}.gridImage--delete:hover .gridImage__inner{background:rgba(232,53,97,.3)}.InputfieldImageEdit{position:relative;display:none}.InputfieldImageEdit--active,.InputfieldImageEditSingle{display:block}.InputfieldImageEdit__core{margin-bottom:.5em}.InputfieldImageEdit__inner{position:relative;display:flex;flex-flow:row;margin:1em .6em 1em 0;-webkit-filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));background-color:#fff}.InputfieldImageEdit__close{cursor:pointer;position:absolute;font-size:1.4em;right:.5em;top:0;color:#ccc !important;text-decoration:none !important}.InputfieldFileSingle .InputfieldImageEdit__close{display:none}.InputfieldImageEdit__trash-single{cursor:pointer;position:absolute;font-size:1.4em;right:0;top:0;color:#aaa !important;text-decoration:none !important}.InputfieldImageEdit__trash-single:hover{color:#e83561}.InputfieldImageEdit__arrow{bottom:100%;content:" ";height:0;width:0;position:absolute;pointer-events:none;border:.5em solid rgba(255,255,255,0);border-bottom-color:#fff;transform:translate(-50%, 0)}.InputfieldImageEdit__imagewrapper{display:inline-block;display:flex;vertical-align:top;justify-content:space-around;width:300px;border-right:1px solid #eee;min-height:1em;padding:20px}.InputfieldImageEdit__imagewrapper>div{width:100%;position:relative}.InputfieldImageEdit__imagewrapper .detail{text-align:center;margin-top:2px}.InputfieldImageEdit__imagewrapper .detail-upload{display:block;opacity:0}.InputfieldImageEdit__imagewrapper .detail-focus{display:none}.InputfieldImageEdit__imagewrapper:hover .detail-upload{opacity:.7}.InputfieldImageEdit__imagewrapper>div.focusWrap .detail-upload{display:none}.InputfieldImageEdit__imagewrapper>div.focusWrap .detail-focus{display:block;opacity:.7}.InputfieldImageEdit__replace img{opacity:.5}.InputfieldImageEdit__edit{display:inline-block;vertical-align:top;min-height:100%;padding:20px;flex-grow:1}.InputfieldImageEdit__edit .InputfieldFileDescription input,.InputfieldImageEdit__edit .InputfieldFileTags input{width:100%}.InputfieldImageEdit__image{position:relative;margin:0 auto;height:auto;cursor:zoom-in;max-width:100%}.InputfieldImageEdit__name{font-weight:bold;display:inline-block;margin-right:.5em !important;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;cursor:pointer}.InputfieldImageEdit__info{font-size:.9em;color:#ccc;white-space:nowrap}.InputfieldImageEdit__buttons{margin:1em 0 .5em 0}.InputfieldImageEdit__buttons button{margin-bottom:.5em}.InputfieldImageEdit__buttons button a,.InputfieldImageEdit__buttons button a:hover{text-decoration:none}.InputfieldImageEdit .InputfieldFileDescription+.InputfieldFileTags{margin-top:.5em}.gridImage__overflow .focusArea,.InputfieldImageEdit .focusArea{display:none;position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;cursor:default}.gridImage__overflow .focusArea.focusActive,.InputfieldImageEdit .focusArea.focusActive{display:block;overflow:hidden}.gridImage__overflow .focusArea .focusCircle,.InputfieldImageEdit .focusArea .focusCircle{cursor:move;width:40px;height:40px;margin:-20px !important;border:3px solid #eb1d61;border-radius:50%;background-color:rgba(255,255,255,.6);background-image:url(data:image/gif;base64,R0lGODlhBAAEAIAAAOsdYQAAACH5BAAAAAAALAAAAAAEAAQAAAIEhI8JBQA7);background-position:15px 15px;background-repeat:no-repeat}.InputfieldImage .ImageData{display:none}.InputfieldImageValidExtensions{margin-left:1em}.InputfieldImageUpload{position:relative;margin:1em 0 0}.InputfieldImageUpload .AjaxUploadDropHere{display:none;position:absolute;top:0;right:0;opacity:.75;cursor:pointer}.ie-no-drop .InputfieldImageUpload .AjaxUploadDropHere{display:none;visibility:hidden}.InputfieldImageUpload .InputfieldImageRefresh{margin-bottom:0}.AdminThemeUikit .InputfieldImageValidExtensions{position:relative;top:-15px}.InputfieldImageNarrow .InputfieldHeader .InputfieldImageSizeSlider{width:50px}.InputfieldImageNarrow .InputfieldImageEdit__inner{display:block;padding-top:.5em}.InputfieldImageNarrow .InputfieldImageEdit__imagewrapper{display:block;width:100%;padding-bottom:0}.InputfieldImageNarrow .InputfieldImageEdit__edit{width:100%;padding-top:0}.InputfieldImageNarrow .InputfieldImageEdit__edit .InputfieldImageEdit__buttons,.InputfieldImageNarrow .InputfieldImageEdit__edit .InputfieldImageEdit__info{display:block;text-align:center}.InputfieldImageNarrow .InputfieldImageEdit__name{margin:0;display:block;text-align:center}.InputfieldImageNarrow .InputfieldImageUpload .AjaxUploadDropHere{display:none !important}.InputfieldFileSingle .gridImages .gridImage img,.InputfieldRenderValueMode .gridImages .gridImage img{cursor:zoom-in}.InputfieldImageEditAll .gridImage{display:block;width:100%}.InputfieldImageEditAll .gridImage:before,.InputfieldImageEditAll .gridImage:after{content:"";display:table;border-collapse:collapse}.InputfieldImageEditAll .gridImage:after{clear:both}.InputfieldImageEditAll .gridImage__overflow{position:relative;z-index:2;top:0;left:0;float:left;background:none;display:block;height:auto !important;width:23%;overflow:visible;cursor:move;padding:10px;padding-right:0}.InputfieldImageEditAll .gridImage__overflow>img{display:block;position:static !important;top:0;left:0;transition:none;-ms-transform:none;transform:none;width:100%;max-width:100% !important;height:initial !important;cursor:move}.InputfieldImageEditAll .gridImage__overflow>.focusArea{position:absolute;top:10px;left:10px}.InputfieldImageEditAll .gridImage .ImageData{position:relative;float:left;display:block;width:77%;padding-left:20px;padding-right:10px;z-index:3}.InputfieldImageEditAll .gridImage .ImageData .InputfieldFileDescription{margin-bottom:.5em}.InputfieldImageEditAll .gridImage .ImageData .InputfieldImageEdit__name{margin-bottom:0;margin-top:1em;position:relative;z-index:100;cursor:pointer}.InputfieldImageEditAll .gridImage .ImageData .InputfieldFileSort{display:none}.InputfieldImageEditAll .gridImage .ImageData input{position:relative;z-index:4}.InputfieldImageEditAll .gridImage.gridImagePlaceholder .gridImage__overflow{background:#fff}.InputfieldImageEditAll .gridImage__inner .gridImage__edit{display:none}.InputfieldImageEditAll .gridImage:hover .gridImage__inner{background:none}.InputfieldImageEditAll .gridImage .InputfieldImageEdit__core input{width:100%}.InputfieldImageEditAll .gridImage__resize{margin-top:10px;color:#e83561;text-shadow:none}.InputfieldImageEditAll .gridImage__progress{bottom:10px;margin-left:10px}.InputfieldImageEditAll .gridImage.gridImageUploading .gridImage__overflow{margin-bottom:10px}.InputfieldImageEditAll .gridImage.gridImageUploading .gridImage__inner{overflow:hidden}.InputfieldImageEditAll .gridImage__btn{z-index:5;display:block !important;top:0;right:0;float:right;background:transparent}.InputfieldImageEditAll .gridImage__edit{display:none}.InputfieldImageEditAll .gridImage__tooltip{display:none !important}.InputfieldImageEditAll .gridImage--delete{background-color:#e83561;border-bottom:8px solid transparent;height:45px;overflow:hidden}.InputfieldImageEditAll .gridImage--delete .gridImage__overflow{display:none}.InputfieldImageEditAll .gridImage--delete .ImageData{padding-left:10px;width:100%}.InputfieldImageEditAll .gridImage--delete .ImageData .InputfieldImageEdit__name{color:rgba(255,255,255,.6);margin-top:3px;text-decoration:line-through}.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__info{color:rgba(255,255,255,.4)}.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__buttons,.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__core,.InputfieldImageEditAll .gridImage--delete .InputfieldImageEdit__additional{display:none}.InputfieldImageEditAll .gridImage--delete .gridImage__btn{color:#fff}.InputfieldImageEditAll .gridImage--delete:hover .gridImage__btn:hover{color:#fff;background-color:#e83561}.InputfieldImageEditAll .gridImage--delete:hover .gridImage__hover,.InputfieldImageEditAll .gridImage--delete .gridImage__hover{background:rgba(255,255,255,0)}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage__overflow{display:block;width:100% !important;height:auto !important;padding:0}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage__overflow img{width:100% !important;height:auto !important}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage__overflow>.focusArea{top:0;left:0}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData{padding:0;width:100% !important;display:block}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__name{margin-top:.5em}.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__name,.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__buttons,.InputfieldImageEditAll.InputfieldImageNarrow .gridImage .ImageData .InputfieldImageEdit__info{text-align:center;display:block}.InputfieldFileActionNote{display:none;white-space:nowrap} diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module index 8070b796..3204d043 100755 --- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module +++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module @@ -47,6 +47,8 @@ * @method array buildTooltipData(Pageimage $pagefile) * @method array getFileActions(Pagefile $pagefile) * @method bool|null processUnknownFileAction(Pageimage $pagefile, $action, $label) + * @method array getImageEditButtons($pagefile, $id, $n, $buttonClass) 3.0.212+ + * @method array getImageThumbnailActions($pagefile, $id, $n, $class) 3.0.212+ * * */ @@ -57,7 +59,7 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu return array( 'title' => __('Images', __FILE__), // Module Title 'summary' => __('One or more image uploads (sortable)', __FILE__), // Module Summary - 'version' => 125, + 'version' => 126, 'permanent' => true, ); } @@ -682,13 +684,18 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu $error = str_replace('{out}', $sanitizer->entities($thumb['error']), $this->themeSettings['error']); } $labels = $this->labels; + $thumbnailActions = array(); + if($this->hasHook('getImageThumbnailActions()')) { + $thumbnailActions = $this->getImageThumbnailActions($pagefile, $id, $n, 'gridImage__btn'); + } + $thumbnailActions = implode('', $thumbnailActions); $out .= "
- $thumbnailActions $labels[edit] @@ -729,6 +736,37 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu return $out; } + /** + * Get the image thumbnail icon actions/links/buttons + * + * These are icon-only actions/links displayed next to the trash icon when hovering over an image preview. + * They are also displayed as icons on the far right side of a image when in full list mode. + * + * Example: + * ~~~~~ + * $wire->addHookAfter('InputfieldImage::getImageThumbnailActions', function(HookEvent $event) { + * $image = $event->arguments(0); // Pageimage + * $class = $event->arguments(3); // class to use on all returned actions + * $a = $event->return; // array + * $a['download'] = ""; + * $event->return = $a; + * }); + * ~~~~~ + * + * #pw-hooker + * + * @param Pageimage $pagefile + * @param string $id Image id string + * @param int $n Image index number + * @param string $class Class that should appear on all returned actions/links/buttons + * @return array + * @since 3.0.212 + * + */ + protected function ___getImageThumbnailActions($pagefile, $id, $n, $class) { + return array(); + } + /** * Render a Pageimage item * @@ -807,40 +845,70 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu * */ protected function ___renderButtons($pagefile, $id, $n) { - if(!$this->useImageEditor) return ''; - - if($n) {} // ignore, $n is for hooks + $buttonClass = $this->themeSettings['buttonClass']; + $buttons = $this->getImageEditButtons($pagefile, $id, $n, $buttonClass); + return implode('', $buttons); + } + + /** + * Get array of buttons for image edit mode + * + * Hook after this to add or remove image edit buttons/actions. + * + * ~~~~~ + * // Example of adding a download button + * $wire->addHookAfter('InputfieldImage::getImageEditButtons', function(HookEvent $event) { + * $image = $event->arguments(0); // Pageimage + * $class = $event->arguments(3); + * $buttons = $event->return; // array + * $icon = wireIconMarkup('download'); + * $buttons['download'] = ""; + * $event->return = $buttons; + * }); + * ~~~~~ + * + * #pw-hooker + * + * @param Pagefile|Pageimage $pagefile Image that buttons are for + * @param string $id Image/file id + * @param int $n Index of image/file (i.e 0=first) + * @param string $buttonClass Class attribute additions that should appear on all returned "; - + $buttons['crop'] = ""; + // Focus if($this->focusMode && $this->focusMode != 'off') { $iconA = $pagefile->hasFocus ? 'fa-check-circle-o' : 'fa-circle-o'; $iconB = $pagefile->hasFocus ? 'fa-check-circle' : 'fa-dot-circle-o'; $buttonText = str_replace('{out}', " $labels[focus]", $this->themeSettings['buttonText']); - $out .= ""; + $buttons['focus'] = ""; } - + // Variations $icon = wireIconMarkup('files-o'); $buttonText = "$icon $labels[variations] ($variationCount)"; $buttonText = str_replace('{out}', $buttonText, $this->themeSettings['buttonText']); - $out .= ""; - - return $out; + $buttons['variations'] = ""; + + return $buttons; } /** @@ -888,7 +956,32 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu } /** - * Get array of actions available for given Pagefile + * Get array of actions (displayed in select dropdown) available for given Pagefile + * + * #pw-hooker + * + * ~~~~~ + * // Example of adding an “Get EXIF data” action + * $wire->addHookAfter('InputfieldImage::getFileActions', function(HookEvent $event) { + * $image = $event->arguments(0); // Pageimage + * if($image->ext == 'jpg' || $image->ext == 'jpeg') { + * $actions = $event->return; // array + * $actions['exif'] = 'Get EXIF data'; + * $event->return = $actions; + * } + * }); + * + * // Example of handling an “Get EXIF data” action + * $wire->addHookAfter('InputfieldImage::processUnknownFileAction', function(HookEvent $event) { + * $image = $event->arguments(0); + * $action = $event->arguments(1); + * if($action === 'exif') { + * $exif = exif_read_data($image->filename); + * $event->warning([ "EXIF data for $image->name" => $exif ], 'icon-photo nogroup'); + * $event->return = true; + * } + * }); + * ~~~~~ * * @param Pagefile|Pageimage $pagefile * @return array Associative array of ('action_name' => 'Action Label') @@ -1353,7 +1446,12 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu } /** - * Called when an action was received that InputfieldImage does not recognize (for hooking purposes) + * Called when a select dropdown action was received that InputfieldImage does not recognize (for hooking purposes) + * + * This is what should be hooked to provide the processing for a custom action added from a hook. + * See the ___getFileActions() method documentation for full example including both hooks. + * + * #pw-hooker * * @param Pageimage $pagefile Image file to process * @param string $action Action to execute diff --git a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss index bf265e9a..7456bcb8 100755 --- a/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss +++ b/wire/modules/Inputfield/InputfieldImage/InputfieldImage.scss @@ -210,15 +210,18 @@ $focusPointCircleSize: 40px; } } - &__trash { - position: absolute; + // &__trash { + &__btn { + // position: absolute; + position: relative; + float: left; background: white; padding: .2em .6em; color: #aaa; z-index: 2; cursor: pointer; - @at-root label#{&} { + @at-root .gridImage #{&} { display: none; } @@ -235,7 +238,7 @@ $focusPointCircleSize: 40px; display: block; } - @at-root .gridImage:hover label#{&}:hover { + @at-root .gridImage:hover #{&}:hover { // overwrite a:hover display: block; color: $deleteColor; @@ -349,7 +352,7 @@ $focusPointCircleSize: 40px; background: rgba($activeColor, .5); } - & .gridImage__trash { + & .gridImage__btn { background-color: $activeColor; color: white; @@ -358,7 +361,7 @@ $focusPointCircleSize: 40px; } } - &:hover .gridImage__trash:hover { + &:hover .gridImage__btn:hover { background-color: $activeColor; } } @@ -390,6 +393,7 @@ $focusPointCircleSize: 40px; &:hover .gridImage__trash:hover { background-color: $deleteColor; + color: white; } &:hover .gridImage__inner { @@ -566,6 +570,9 @@ $focusPointCircleSize: 40px; margin: 1em 0 0.5em 0; button { margin-bottom: 0.5em; + a, a:hover { + text-decoration: none; + } } } @@ -828,11 +835,13 @@ $focusPointCircleSize: 40px; } } - &__trash { + &__btn { z-index: 5; display: block !important; top: 0; right: 0; + float: right; + background: transparent; } &__edit { @@ -874,7 +883,10 @@ $focusPointCircleSize: 40px; display: none; } - &:hover .gridImage__trash:hover { + .gridImage__btn { + color: white; + } + &:hover .gridImage__btn:hover { color: white; background-color: $deleteColor; } @@ -934,4 +946,4 @@ $focusPointCircleSize: 40px; .gridImage__edit { display:block !important; } .gridImage__edit span { display:none; } .gridImage__edit:hover span { display:inline; } -*/ \ No newline at end of file +*/