浏览代码

Aligning the package to the new default theme.

Aleksander Nowodzinski 8 年之前
父节点
当前提交
18469b0689

+ 18 - 0
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -8,8 +8,10 @@
  */
 
 import View from '../view';
+import IconView from '../icon/iconview';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
 
 import '../../theme/components/dropdown/dropdown.css';
 
@@ -108,6 +110,14 @@ export default class DropdownView extends View {
 		 */
 		this.keystrokes = new KeystrokeHandler();
 
+		/**
+		 * Arrow icon of the dropdown.
+		 *
+		 * @readonly
+		 * @member {module:ui/icon/iconview~IconView} #arrowView
+		 */
+		const arrowView = this.arrowView = new IconView();
+
 		this.setTemplate( {
 			tag: 'div',
 
@@ -120,10 +130,18 @@ export default class DropdownView extends View {
 
 			children: [
 				buttonView,
+				arrowView,
 				panelView
 			]
 		} );
 
+		arrowView.content = dropdownArrowIcon;
+		arrowView.extendTemplate( {
+			attributes: {
+				class: 'ck-dropdown__icon'
+			}
+		} );
+
 		buttonView.extendTemplate( {
 			attributes: {
 				class: [

+ 12 - 6
packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

@@ -5,21 +5,27 @@
 
 @import "../tooltip/mixins/_tooltip.css";
 
+:root {
+	--ck-dropdown-icon-size: 10px;
+}
+
 .ck-dropdown {
 	display: inline-block;
 	position: relative;
 
 	/* A triangle displayed to indicate this is actually a dropdown. */
-	&::after {
-		content: '';
-		width: 0;
-		height: 0;
+	& .ck-dropdown__icon {
 		pointer-events: none;
 		z-index: var(--ck-z-default);
 
 		position: absolute;
-		top: 50%;
-		transform: translate3d( 0, -50%, 0 );
+		top: 55%;
+		transform: translate3d( 0, -55%, 0 );
+
+		width: var(--ck-dropdown-icon-size);
+		height: var(--ck-dropdown-icon-size);
+		min-width: var(--ck-dropdown-icon-size);
+		min-height: var(--ck-dropdown-icon-size);
 	}
 
 	/* Dropdown button should span horizontally, e.g. in vertical toolbars */

+ 1 - 0
packages/ckeditor5-ui/theme/icons/dropdown-arrow.svg

@@ -0,0 +1 @@
+<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M5.043 7.701a.499.499 0 0 1-.404-.144L1.104 4.022a.5.5 0 1 1 .707-.707l3.232 3.232 3.233-3.232a.5.5 0 0 1 .707.707L5.447 7.557a.499.499 0 0 1-.404.144z" fill="#000" fill-rule="evenodd"/></svg>