From 4eb3c5960f520cfe809507e4c0a1e1850c5b9c00 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Tue, 2 Dec 2014 00:25:15 +0000 Subject: [PATCH] TinyMCE: update the wpView toolbar to look the same as the new image toolbar. Fixes #30561. git-svn-id: https://develop.svn.wordpress.org/trunk@30694 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/js/mce-view.js | 4 +- .../js/tinymce/plugins/wpview/plugin.js | 28 +++- .../skins/wordpress/images/dashicon-edit.png | Bin 251 -> 368 bytes .../wordpress/images/dashicon-no-alt.png | Bin 164 -> 0 bytes .../skins/wordpress/images/dashicon-no.png | Bin 0 -> 339 bytes .../js/tinymce/skins/wordpress/wp-content.css | 145 ++++++++++-------- 6 files changed, 109 insertions(+), 68 deletions(-) delete mode 100644 src/wp-includes/js/tinymce/skins/wordpress/images/dashicon-no-alt.png create mode 100644 src/wp-includes/js/tinymce/skins/wordpress/images/dashicon-no.png diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js index ab33cb4bcf..da1ce6aed2 100644 --- a/src/wp-includes/js/mce-view.js +++ b/src/wp-includes/js/mce-view.js @@ -56,9 +56,9 @@ window.wp = window.wp || {}; this.setContent( '

\u00a0

' + '
' + - '
' + + '
' + ( _.isFunction( views[ this.type ].edit ) ? '
' : '' ) + - '
' + + '
' + '
' + '
' + ( this.getHtml() || this.loadingPlaceholder() ) + diff --git a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js index 3de4949f86..6016e3bdc2 100644 --- a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js @@ -115,8 +115,13 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { var clipboard, dom = editor.dom; - // Bail if node is already selected. - if ( ! viewNode || viewNode === selected ) { + if ( ! viewNode ) { + return; + } + + // Adjust the toolbar position and bail if node is already selected. + if ( viewNode === selected ) { + adjustToolbarPosition( viewNode ); return; } @@ -128,6 +133,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { deselect(); selected = viewNode; dom.setAttrib( viewNode, 'data-mce-selected', 1 ); + adjustToolbarPosition( viewNode ); clipboard = dom.create( 'div', { 'class': 'wpview-clipboard', @@ -151,6 +157,24 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { editor.fire( 'wpview-selected', viewNode ); } + function adjustToolbarPosition( viewNode ) { + var delta = 0, + toolbar = editor.$( viewNode ).find( '.toolbar' ), + editorToolbar = tinymce.$( editor.editorContainer ).find( '.mce-toolbar-grp' )[0], + editorToolbarBottom = ( editorToolbar && editorToolbar.getBoundingClientRect().bottom ) || 0; + + if ( toolbar.length && editor.iframeElement ) { + // 48 = 43 for the toolbar + 5 buffer + delta = viewNode.getBoundingClientRect().top + editor.iframeElement.getBoundingClientRect().top - editorToolbarBottom - 48; + } + + if ( delta < 0 ) { + toolbar.removeClass( 'mce-arrow-down' ).css({ top: ( -43 + delta * -1 ) }); + } else if ( delta > 0 && ! toolbar.hasClass( 'mce-arrow-down' ) ) { + toolbar.addClass( 'mce-arrow-down' ).css({ top: '' }); + } + } + /** * Deselect a selected view and remove clipboard */ diff --git a/src/wp-includes/js/tinymce/skins/wordpress/images/dashicon-edit.png b/src/wp-includes/js/tinymce/skins/wordpress/images/dashicon-edit.png index 9b2c54de4206ee3e9518a0e0befddffd760953f7..7c47b1cf28fcc0d62b1b29f1db119334dfb09869 100644 GIT binary patch literal 368 zcmV-$0gwKPP)mKin4c#xp$7PcaE}mj=6V|!G4mif_Ha{hIf*ls+!5|o_BYietM#U zccPM}riOQ>lB%Z3&8nKJu8w!Eo~pUU(Y=z2!IpQ)vX0H|_0ght(e3fk?e*E^?b+@1 z-Li_^@%7>L_36Qq>Gk#T_4W1HuJ!4~_3h2|?a}q^+4c3w_4VQP_38EX_1bef5dZ)H zl1W5CR49?v%-I&fFc?MQ)0$GVG^nWriRn*~_kTE7qLFgnefzDoVgH0$Bk^Yb3yA}b zyc&rEC53Nn0|0FuBJo7uCIGtU0Es7>(%lhE1zRJSqEs5;?1M%yMN`ilKG!W}=Ca62 z=I}m_XA4Lgk!{z>BZ6#J$FMI)gzl*FtksBHS O0000yHtgEWIxwyu~#nRHz-rn8m>FMyiA%gX%Q~ejtA{lGpuzw;_iNg9-x`0RZ?JOq6)YF>L?<002ovPDHLkV1k)7 BZxH|h diff --git a/src/wp-includes/js/tinymce/skins/wordpress/images/dashicon-no-alt.png b/src/wp-includes/js/tinymce/skins/wordpress/images/dashicon-no-alt.png deleted file mode 100644 index cc0f927350fc00597fec4558c7478add58df14d7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 164 zcmeAS@N?(olHy`uVBq!ia0vp^av;pY3?xs=ZJr3E_yc@GT)Eg7Vxl8n{UR?EyX^uH_(5RbF0K-nSD-RrT$x z19GMvtebVTZXOVwtebbXY1!4jO;`JNKAd&*>9UI-H}#e8>?_~9^X$QCbw_8_ot#&9 z7KqmMo!zawP*S6|-!`1Rq=zK37GK0P|?>D8-GzkYrB_3PWOUq4=4_VFu_y8HDj zND?j#6sv!F;y=hqo-U3d8t3m$@)l}x;Bk=_5jYy?z$nTl@RQ@t{~Er;nN!#om`Cn; z<+n>~#($3JmdDD=Bd^NT3BTDgb7^&!#Gf4v%bzFlv*>o~@_sdD@Y9nCX?T+PF=|nJ z)Ec8Z;wz45{mtzSWqRYpe2z0AUSiI?hNUO+;%657oV?_2v9ERRdQ-c+ZGY98>Xgi@ V5*1Gg&jvb)!PC{xWt~$(69DO8uHOIv literal 0 HcmV?d00001 diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index ea19a0e6a8..47a820baa8 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -224,9 +224,7 @@ audio { /* delegate the handling of the selection to the wpview tinymce plugin */ .wpview-wrap, -.wpview-wrap *, -#wp-image-toolbar, -#wp-image-toolbar * { +.wpview-wrap * { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; @@ -323,16 +321,89 @@ audio { .wpview-wrap .toolbar { position: absolute; - top: 0; - left: 0; + top: -43px; + left: 45%; + left: calc(50% - 32px); display: none; z-index: 100; + background-color: #f5f5f5; + border: 1px solid #aaa; + padding: 1px; + cursor: default; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 ); + box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 ); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-bottom: 8px; } .wpview-wrap[data-mce-selected] .toolbar { display: block; } +.wpview-wrap .toolbar:before, +.wpview-wrap .toolbar:after { + position: absolute; + left: 50%; + display: block; + width: 0; + height: 0; + border-style: solid; + border-color: transparent; + border-width: 9px; + margin-left: -9px; + content: ''; +} + +.wpview-wrap .toolbar:after { + border-width: 8px; + margin-left: -8px; +} + +.wpview-wrap .toolbar.mce-arrow-down:before { + bottom: -18px; + border-top-color: #aaa; +} + +.wpview-wrap .toolbar.mce-arrow-down:after { + bottom: -16px; + border-top-color: #f5f5f5; +} + +.wpview-wrap .toolbar.mce-arrow-up:before { + top: -18px; + border-bottom-color: #aaa; +} + +.wpview-wrap .toolbar.mce-arrow-up:after { + top: -16px; + border-bottom-color: #f5f5f5; +} + +.wpview-wrap .toolbar div { + margin: 2px; + padding: 2px 3px; + width: 20px; + height: 20px; + color: #777; + cursor: pointer; + font-size: 20px; + border: 1px solid transparent; + border-radius: 2px; +} + +.wpview-wrap .toolbar div:hover { + background-color: #fafafa; + border-color: #999; + color: #222; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); + box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); + outline: none; +} + .wpview-wrap .loading-placeholder { border: 1px dashed #ccc; padding: 10px; @@ -384,32 +455,10 @@ audio { background: transparent; } -#wp-image-toolbar { - position: absolute; - margin: 0; -} - -.wpview-wrap .toolbar div, -#wp-image-toolbar i { - margin-top: 7px; - margin-left: 7px; - padding: 2px; - width: 30px; - height: 30px; - box-shadow: 0 1px 3px rgba(0,0,0,0.5); - background-color: #000; - background-color: rgba(0,0,0,0.9); - cursor: pointer; - color: white; - font-size: 30px; -} - .ie8 .wpview-wrap .toolbar div, -.ie7 .wpview-wrap .toolbar div, -.ie8 #wp-image-toolbar i, -.ie7 #wp-image-toolbar i { +.ie7 .wpview-wrap .toolbar div { display: inline; - padding: 0; + padding: 4px; } .ie8 .dashicons-edit, @@ -417,9 +466,9 @@ audio { background-image: url(images/dashicon-edit.png); } -.ie8 .dashicons-no-alt, -.ie7 .dashicons-no-alt { - background-image: url(images/dashicon-no-alt.png); +.ie8 .dashicons-no, +.ie7 .dashicons-no { + background-image: url(images/dashicon-no.png); } .wpview-error { @@ -448,27 +497,6 @@ audio { font-family: 'Open Sans', sans-serif; } -.wpview-wrap .toolbar div:hover, -#wp-image-toolbar i:hover { - box-shadow: 0 1px 3px rgba(0,0,0,0.8); - background-color: #000; - color: #2ea2cc; -} - -/* Audio player is short; therefore let's put the toolbar above */ -.wpview-wrap[data-wpview-type="audio"] .toolbar { - top: auto; - bottom: -34px; -} - -.wpview-wrap[data-wpview-type="audio"] .toolbar div { - margin-top: 0; -} - -.wpview-wrap[data-wpview-type="audio"] .toolbar div:first-child { - margin-left: 0; -} - .wont-play { padding: 4px 0; } @@ -595,17 +623,6 @@ img.wp-oembed { float: right; } -.rtl .wpview-wrap .toolbar { - left: auto; - right: 0; -} - -.rtl .wpview-wrap .toolbar div, -.rtl #wp-image-toolbar i { - margin-left: auto; - margin-right: 7px; -} - @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25),