2013-01-22 22:41:22 +00:00
|
|
|
/*!
|
Major UI refactoring and improvements
Objective:
Refactor UI widgets, improve usability and accessibility of menus, general cleanup and style improvements.
Extras:
Fixed documentation in a few other files to make descriptions of jQuery event arguments more consistent, classes inherit correctly, and made use of the @cfg functionality in jsduck.
Changes:
.docs/config.json
* Added window, HTMLDocument, HTMLElement, DocumentFragment and XMLHttpRequest to externals, so jsduck doesn't throw warnings when they are used
demos/ve/index.php, modules/ve/test/index.php, VisualEditor.php
* Moved widgets above tools (since tools use widgets)
demos/ve/index.php
* Refactored widget initialization to use options
* Renamed variables to match widget names
ve.init.mw.ViewPageTarget.css
* Adjusted text sizes to make widgets work normally
* Added margins for buttons in toolbar (since button widgets
don't have any)
* Removed styles for init buttons (button widgets now)
ve.init.mw.ViewPageTarget.js
* Switched to using button widgets (involved moving things around
a bit)
ve.ui.LinkInspector.js, ve.ui.MWLinkInspector.js
* Renamed static property "inputWidget" to
"linkTargetInputWidget" to better reflect the required base class
for the properties value
icons.ai, check.png, check.svg
* Added "check" icon, used in menu right now to show which item
is selected
ve.ui.Icons-raster.css, ve.ui.Icons-vector.css
* Added check icon
* Removed :before pseudo selectors from most of the icon classes (not need by button tool anymore, makes them more reusable now)
ve.ui.Tool.css
* Adjusted drop down tool styles so menu appears below, instead
of on top, of the label
* Adjusted paragraph font size to better match actual content
* Updated class names to still work with menu widget changes
(items are their own widgets now)
* Updated selectors as per changes in the structure of button tools
ve.ui.Widget.css
* Added styles for buttons and menu items
* Adjusted menu styles
ve.ui.*ButtonTool.js
* Added config options argument passthrough
ve.ui.ButtonTool.js
* Moved var statement to the top inside constructor
* Switched to using "a" tag to get cross-browser :active support
* Added icon to inside of button to make icon styles more reusable
* Removed disabled support (now provided by widget parent class)
ve.ui.FormatDropDownTool.js
* Updated options initialization to construct menu item objects
* Modified handling of items to account for changes in menu and
item classes
* Optimized onUpdateState method a bit, adding early exit to
inner loop
ve.ui.ButtonTool.js, ve.ui.DropdownTool.js, ve.ui.Context.js,
ve.ui.Frame, ve.ui.Tool.js, ve.ui.Widget.js
* Added chain ability to non-getter methods
ve.ui.DropdownTool.js
* Removed items argument to constructor
* Updated code as per changes in menu class
* Fixed inconsistent naming of event handler methods
* Removed item event handling (now handled by items directly)
* Made use of this.$$ to ensure tool works in other frames
ve.ui.Tool.js
* Made tools inherit from widget
* Moved trigger registry event handler to a method
ve.ui.Context.js
* Switched from using menu to contain toolbar to a simple wrapper
ve.ui.js
* Added get$$ method, a convenience function for binding jQuery
to a specific document context
ve.ui.*Widget.js
* Switched to using a config options object instead of individual arguments
* Added options
* Factored out flags and labels into their own classes
* Refactored value setting methods for inputs
ve.ui.MenuWidget.js, ve.ui.MenuItemWidget.js
* Broke items out into their own classes
* Redesigned API
* Updated code that uses these classes
* Added support for keyboard interaction
* Made items flash when selected (delaying the hiding of the menu for 200ms)
ve.ui.LinkTargetInputWidget.js, ve.ui.MWLinkTargetInputWidget
* Refactored annotation setting methods
Change-Id: I7769bd5a5b79f1ab36f258ef9f2be583ca503ce6
2013-02-20 23:25:12 +00:00
|
|
|
* VisualEditor UserInterface Widget styles.
|
(bug 43841) Major ve.ui rewrite, especially ve.ui.LinkInspector
Objectives:
* Make the link inspector easier to use
* Try to resolve a few bugs (bug 43841, bug 43063, bug 42986)
* Stop using jquery.multiSuggest (which didn't really understand annotations)
* Better divide MediaWiki specifics from generic implementations
Changes:
VisualEditor.php, modules/ve/test/index.php, demos/ve/index.php
* Updated links to files
ve.Registry
* Fixed mistake where registry was initialized as an array - this didn't cause any errors because you can add arbitrary properties to an array and use it like any other object
ve.Factory
* Removed duplicate initialization of registry property
* Added entries property, which is an array that's appended to for tracking the order of registrations
ve.CommandRegistry
* Added mwLink command which opens the mwLink inspector
ve.ui.TextInputWidget
* Added basic widget class for text inputs
ve.ui.TextInputMenuWidget
* Added widget that provides a menu of options for a text input widget
ve.ui.MWLinkTargetInputWidget
* Added MediaWiki specific link target widget
ve.ui.MenuWidget
* Converted ve.ui.Menu into a widget
* Moved the body of onSelect to onMouseUp
ve.ui.LinkTargetInputWidget
* Added link target widget which adds link annotation functionality to a normal text input
ve.ui.InputWidget
* Added generic input widget which emits reliable and instant change events and synchronizes a value property with the DOM value
ve.ui.Widget
* Added base widget class
* Widgets can be used in any frame
ve.ui.Tool
* Fixed line length issues
ve.ui.InspectorFactory
* Made use of new entries property for factories to select the most recently added inspector if more than one match a given annotation
ve.ui.Inspector
* Added auto-focus on the first visible input element on open
* Moved afterClose event to after re-focus on document on close
* Added documentation
ve.ui.Frame
* Adjusted documentation
* Added binding of $$ to the frame context so it can be passed around
* Added documentation
ve.ui.Context
* Added ve.ui.Widget.css to iframes
* Updated code as per moving of ve.ui.Menu to ve.ui.MenuWidget
* Removed unused positionBelowOverlay method
* Added CSS settings to set overlay left and width properties according to context size
* Added documentation
ve.ui.DropdownTool
* Updated code as per moving of ve.ui.Menu to ve.ui.MenuWidget
ve.ui.FormatDropdownTool
* Added documentation
ve.ui.MWLinkButtonTool
* Added MediaWiki specific version of ve.ui.LinkButtonTool, which opens the mwLink inspector
ve.ui.Widget.css
* Added styles for all widgets
ve.ui.Tool.css, ve.init.sa.css, ve.init.mw.ViewPageTarget.css, ve.init.mw.ViewPageTarget-apex.css
* Updated code as per moving of ve.ui.Menu to ve.ui.MenuWidget
ve.ui.Menu.css
* Deleted (merged into ve.ui.Widget.css)
ve.ui.Menu.css
* Deleted suggest styles (no longer used)
pending.gif, pending.psd
* Added diagonal stripe animation to indicate a pending request to the API
ve.ui.MWLinkInspector
* Added MediaWiki specific inspector which uses MediaWiki specific annotations and widgets
ve.ui.LinkInspector
* Removed mw global hint (not needed anymore)
* Switched from comparing targets to annotations (since the target text is ambiguous in some situations)
* Switched to using input widget, which is configured using a static property
* Removed use of jquery.multiSuggest
* Moved MediaWiki specifics to their own class (ve.ui.MWLinkInspector)
ve.init.mw.ViewPageTarget
* Added MediaWiki specific toolbar and command options
Change-Id: I859b5871a9d2f17d970c002067c8ff24f3513e9f
2013-01-09 21:34:23 +00:00
|
|
|
*
|
2013-02-19 23:37:34 +00:00
|
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
(bug 43841) Major ve.ui rewrite, especially ve.ui.LinkInspector
Objectives:
* Make the link inspector easier to use
* Try to resolve a few bugs (bug 43841, bug 43063, bug 42986)
* Stop using jquery.multiSuggest (which didn't really understand annotations)
* Better divide MediaWiki specifics from generic implementations
Changes:
VisualEditor.php, modules/ve/test/index.php, demos/ve/index.php
* Updated links to files
ve.Registry
* Fixed mistake where registry was initialized as an array - this didn't cause any errors because you can add arbitrary properties to an array and use it like any other object
ve.Factory
* Removed duplicate initialization of registry property
* Added entries property, which is an array that's appended to for tracking the order of registrations
ve.CommandRegistry
* Added mwLink command which opens the mwLink inspector
ve.ui.TextInputWidget
* Added basic widget class for text inputs
ve.ui.TextInputMenuWidget
* Added widget that provides a menu of options for a text input widget
ve.ui.MWLinkTargetInputWidget
* Added MediaWiki specific link target widget
ve.ui.MenuWidget
* Converted ve.ui.Menu into a widget
* Moved the body of onSelect to onMouseUp
ve.ui.LinkTargetInputWidget
* Added link target widget which adds link annotation functionality to a normal text input
ve.ui.InputWidget
* Added generic input widget which emits reliable and instant change events and synchronizes a value property with the DOM value
ve.ui.Widget
* Added base widget class
* Widgets can be used in any frame
ve.ui.Tool
* Fixed line length issues
ve.ui.InspectorFactory
* Made use of new entries property for factories to select the most recently added inspector if more than one match a given annotation
ve.ui.Inspector
* Added auto-focus on the first visible input element on open
* Moved afterClose event to after re-focus on document on close
* Added documentation
ve.ui.Frame
* Adjusted documentation
* Added binding of $$ to the frame context so it can be passed around
* Added documentation
ve.ui.Context
* Added ve.ui.Widget.css to iframes
* Updated code as per moving of ve.ui.Menu to ve.ui.MenuWidget
* Removed unused positionBelowOverlay method
* Added CSS settings to set overlay left and width properties according to context size
* Added documentation
ve.ui.DropdownTool
* Updated code as per moving of ve.ui.Menu to ve.ui.MenuWidget
ve.ui.FormatDropdownTool
* Added documentation
ve.ui.MWLinkButtonTool
* Added MediaWiki specific version of ve.ui.LinkButtonTool, which opens the mwLink inspector
ve.ui.Widget.css
* Added styles for all widgets
ve.ui.Tool.css, ve.init.sa.css, ve.init.mw.ViewPageTarget.css, ve.init.mw.ViewPageTarget-apex.css
* Updated code as per moving of ve.ui.Menu to ve.ui.MenuWidget
ve.ui.Menu.css
* Deleted (merged into ve.ui.Widget.css)
ve.ui.Menu.css
* Deleted suggest styles (no longer used)
pending.gif, pending.psd
* Added diagonal stripe animation to indicate a pending request to the API
ve.ui.MWLinkInspector
* Added MediaWiki specific inspector which uses MediaWiki specific annotations and widgets
ve.ui.LinkInspector
* Removed mw global hint (not needed anymore)
* Switched from comparing targets to annotations (since the target text is ambiguous in some situations)
* Switched to using input widget, which is configured using a static property
* Removed use of jquery.multiSuggest
* Moved MediaWiki specifics to their own class (ve.ui.MWLinkInspector)
ve.init.mw.ViewPageTarget
* Added MediaWiki specific toolbar and command options
Change-Id: I859b5871a9d2f17d970c002067c8ff24f3513e9f
2013-01-09 21:34:23 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
|
*/
|
|
|
|
|
|
2013-07-08 21:20:31 +00:00
|
|
|
/* ve.ui.LanguageInputWidget */
|
|
|
|
|
|
|
|
|
|
.ve-ui-langInputWidget {
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 20em;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-langInputWidget input,
|
|
|
|
|
.ve-ui-langInputWidget input:focus[readonly],
|
2013-10-09 20:09:59 +00:00
|
|
|
.ve-ui-langInputWidget.oo-ui-widget-disabled input:focus,
|
2013-07-08 21:20:31 +00:00
|
|
|
.ve-ui-langInputWidget textarea,
|
|
|
|
|
.ve-ui-langInputWidget textarea:focus[readonly],
|
2013-10-09 20:09:59 +00:00
|
|
|
.ve-ui-langInputWidget.oo-ui-widget-disabled textarea:focus {
|
2013-07-08 21:20:31 +00:00
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
background-color: #f7f7f7;
|
|
|
|
|
border: solid 1px #ccc;
|
|
|
|
|
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
|
|
|
|
|
padding: 0.5em;
|
|
|
|
|
border-radius: 0.25em;
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 100%;
|
|
|
|
|
resize: none;
|
|
|
|
|
|
|
|
|
|
/* Animation */
|
|
|
|
|
-webkit-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
|
|
|
-moz-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
|
|
|
-o-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
|
|
|
transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-langInputWidget-pending input,
|
|
|
|
|
.ve-ui-langInputWidget-pending textarea {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-langInputWidget input:focus,
|
|
|
|
|
.ve-ui-langInputWidget textarea:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
border-color: #a7dcff;
|
|
|
|
|
box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-langInputWidget input[readonly],
|
|
|
|
|
.ve-ui-langInputWidget textarea[readonly] {
|
|
|
|
|
color: #777;
|
|
|
|
|
text-shadow: 0 1px 1px #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2013-10-09 20:09:59 +00:00
|
|
|
.ve-ui-langInputWidget.oo-ui-widget-disabled input,
|
|
|
|
|
.ve-ui-langInputWidget.oo-ui-widget-disabled input:focus,
|
|
|
|
|
.ve-ui-langInputWidget.oo-ui-widget-disabled textarea,
|
|
|
|
|
.ve-ui-langInputWidget.oo-ui-widget-disabled textarea:focus {
|
2013-07-08 21:20:31 +00:00
|
|
|
color: #ccc;
|
|
|
|
|
text-shadow: 0 1px 1px #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-langInputWidget-decorated input,
|
|
|
|
|
.ve-ui-langInputWidget-decorated textarea {
|
|
|
|
|
padding-left: 2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-langInputWidget-icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 2em;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-position: right center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
2013-10-09 20:09:59 +00:00
|
|
|
/* ve.ui.SurfaceWidget.js */
|
2013-03-26 23:55:41 +00:00
|
|
|
|
2013-10-09 20:09:59 +00:00
|
|
|
.ve-ui-surfaceWidget-surface {
|
|
|
|
|
border: solid 1px #ddd;
|
2013-03-26 23:55:41 +00:00
|
|
|
border-radius: 0.25em;
|
2013-10-09 20:09:59 +00:00
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
border-top-left-radius: 0;
|
2013-03-26 23:55:41 +00:00
|
|
|
}
|
|
|
|
|
|
2013-10-09 20:09:59 +00:00
|
|
|
.ve-ui-surfaceWidget-surface .ve-ce-documentNode {
|
|
|
|
|
padding: 1.875em; /* 1.5/0.8 */
|
2013-10-02 00:00:57 +00:00
|
|
|
}
|
|
|
|
|
|
2013-08-03 00:18:50 +00:00
|
|
|
.ve-ui-surfaceWidget-toolbar {
|
2013-07-17 19:09:30 +00:00
|
|
|
font-size: 1.25em;
|
|
|
|
|
}
|
|
|
|
|
|
2013-10-17 17:35:16 +00:00
|
|
|
.ve-ui-surfaceWidget-toolbar > .oo-ui-toolbar-bar {
|
2013-07-17 19:09:30 +00:00
|
|
|
border: solid 1px #ddd;
|
|
|
|
|
border-radius: 0.25em;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
border-bottom-width: 0;
|
|
|
|
|
}
|
2013-10-18 20:09:04 +00:00
|
|
|
|
|
|
|
|
/* ve.ui.GroupButtonWidget.js */
|
|
|
|
|
|
|
|
|
|
.ve-ui-groupButtonWidget {
|
|
|
|
|
white-space: normal;
|
|
|
|
|
}
|