mediawiki-extensions-Visual.../modules/ve/ui/styles/ve.ui.Widget.css

578 lines
13 KiB
CSS
Raw Normal View History

/*!
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
*
* @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
*/
Context, frame, window, dialog and inspector refactor This is a major refactor of user interface context, frame, dialog and inspector classes, including adding several new classes which generalize managing inspectors/dialogs (which are now subclasses of window). New classes: * ve.ui.Window.js - base class for inspector and dialog classes * ve.ui.WindowSet.js - manages mutually exclusive windows, used by surface and context for dialogs and inspectors respectively * ve.ui.DialogFactory - generates dialogs * ve.ui.IconButtonWidget - used in inspector for buttons in the head Refactored classes: * ve.ui.Context - moved inspector management to window set * ve.ui.Frame - made iframes initialize asynchronously * ve.ui.Dialog and ve.ui.Inspector - moved initialization to async initialize method Other interesting bits: ve.ui.*Icons*.css, *.svg, *.png, *.ai * Merged icon stylesheets so all icons are available inside windows * Renamed inspector icon to window ve.ui.*.css * Reorganized styles so that different windows can include only what they need * Moved things to where they belonged (some things were in strange places) ve.init.Target.js, ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js * Removed dialog management - dialogs are managed by the surface now ve.ui.*Dialog.js * Renamed title message static property * Added registration ve.ui.*Inspector.js * Switch to accept surface object rather than context, which conforms to the more general window class without losing any functionality (in fact, most of the time the surface was what we actually wanted) ve.ui.MenuWidget.js, ve.ui.MWLinkTargetInputWidget.js * Using surface overly rather than passing an overlay around through constructors Change-Id: Ifd16a1003ff44c48ee7b2c66928cf9cc858b2564
2013-03-13 00:06:57 +00:00
/* ve.ui.IconButtonWidget */
.ve-ui-iconButtonWidget {
width: 2em;
height: 2em;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
opacity: 0.8;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
-ms-transition: opacity 200ms;
-o-transition: opacity 200ms;
transition: opacity 200ms;
Context, frame, window, dialog and inspector refactor This is a major refactor of user interface context, frame, dialog and inspector classes, including adding several new classes which generalize managing inspectors/dialogs (which are now subclasses of window). New classes: * ve.ui.Window.js - base class for inspector and dialog classes * ve.ui.WindowSet.js - manages mutually exclusive windows, used by surface and context for dialogs and inspectors respectively * ve.ui.DialogFactory - generates dialogs * ve.ui.IconButtonWidget - used in inspector for buttons in the head Refactored classes: * ve.ui.Context - moved inspector management to window set * ve.ui.Frame - made iframes initialize asynchronously * ve.ui.Dialog and ve.ui.Inspector - moved initialization to async initialize method Other interesting bits: ve.ui.*Icons*.css, *.svg, *.png, *.ai * Merged icon stylesheets so all icons are available inside windows * Renamed inspector icon to window ve.ui.*.css * Reorganized styles so that different windows can include only what they need * Moved things to where they belonged (some things were in strange places) ve.init.Target.js, ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js * Removed dialog management - dialogs are managed by the surface now ve.ui.*Dialog.js * Renamed title message static property * Added registration ve.ui.*Inspector.js * Switch to accept surface object rather than context, which conforms to the more general window class without losing any functionality (in fact, most of the time the surface was what we actually wanted) ve.ui.MenuWidget.js, ve.ui.MWLinkTargetInputWidget.js * Using surface overly rather than passing an overlay around through constructors Change-Id: Ifd16a1003ff44c48ee7b2c66928cf9cc858b2564
2013-03-13 00:06:57 +00:00
}
.ve-ui-iconButtonWidget:hover {
opacity: 1;
}
Outline controls Objectives: * Allow reordering items in outline widgets using an outline control widget * Use an outline control widget to reorder transclusion parts Changes: ve.ui.SelectWidget.js * Emit add and remove events ve.ui.OutlineItemWidget.js * Add movable config options * Add isMovable method ve.ui.OutlineControlsWidget.js * New class * Displays move up/down buttons which are synchronized with an outline widget * Doesn't actually move items (since an outline widget is probably data-driven) just emits events ve.ui.Widget.css * Add disabled style for icon button widgets * Add styles for outline controls widget ve.ui.Icons*.css * Add missing icon styles ve.ui.Dialog.css * Add styles for outline and controls in editable paged dialogs ve.ui.GroupElement.js * Fix bug where items are insertions are in the wrong place when "moving" them ve.ui.PagedDialog.js * Add editable config option which shows outline controls under the outline * Pass through movable config option when creating pages ve.ui.MWTranclusionDialog.js * Configure paged dialog outline as editable * Add initialize method to connect outline controls widget events * Make addPart method automatically add parameters when templates are added * Add handler for outline controls move event which re-orders parts * Make parts movable (params are automatically ordered, so they aren't movable) ve.dm.MWTransclusionModel.js * Add addPart method and use it within the addContent and addTemplate methods * Fix documentation lies * Add getPartFromId method *.php * Add links to new files and messages Change-Id: I919d4c3e9b85d07a97a99c0b2e8739a859bdf2b1
2013-06-14 00:46:45 +00:00
.ve-ui-iconButtonWidget.ve-ui-widget-disabled {
opacity: 0.2;
}
/* ve.ui.ButtonWidget */
.ve-ui-buttonWidget {
display: inline-block;
height: 1.8em;
margin: 0.1em 0;
padding: 0.25em 0.75em;
border-radius: 0.3em;
vertical-align: top;
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
color: #333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
text-align: center;
font-size: 1em;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Animation */
-webkit-transition: border-color 100ms;
Context, frame, window, dialog and inspector refactor This is a major refactor of user interface context, frame, dialog and inspector classes, including adding several new classes which generalize managing inspectors/dialogs (which are now subclasses of window). New classes: * ve.ui.Window.js - base class for inspector and dialog classes * ve.ui.WindowSet.js - manages mutually exclusive windows, used by surface and context for dialogs and inspectors respectively * ve.ui.DialogFactory - generates dialogs * ve.ui.IconButtonWidget - used in inspector for buttons in the head Refactored classes: * ve.ui.Context - moved inspector management to window set * ve.ui.Frame - made iframes initialize asynchronously * ve.ui.Dialog and ve.ui.Inspector - moved initialization to async initialize method Other interesting bits: ve.ui.*Icons*.css, *.svg, *.png, *.ai * Merged icon stylesheets so all icons are available inside windows * Renamed inspector icon to window ve.ui.*.css * Reorganized styles so that different windows can include only what they need * Moved things to where they belonged (some things were in strange places) ve.init.Target.js, ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js * Removed dialog management - dialogs are managed by the surface now ve.ui.*Dialog.js * Renamed title message static property * Added registration ve.ui.*Inspector.js * Switch to accept surface object rather than context, which conforms to the more general window class without losing any functionality (in fact, most of the time the surface was what we actually wanted) ve.ui.MenuWidget.js, ve.ui.MWLinkTargetInputWidget.js * Using surface overly rather than passing an overlay around through constructors Change-Id: Ifd16a1003ff44c48ee7b2c66928cf9cc858b2564
2013-03-13 00:06:57 +00:00
-moz-transition: border-color 100ms;
-ms-transition: border-color 100ms;
-o-transition: border-color 100ms;
Context, frame, window, dialog and inspector refactor This is a major refactor of user interface context, frame, dialog and inspector classes, including adding several new classes which generalize managing inspectors/dialogs (which are now subclasses of window). New classes: * ve.ui.Window.js - base class for inspector and dialog classes * ve.ui.WindowSet.js - manages mutually exclusive windows, used by surface and context for dialogs and inspectors respectively * ve.ui.DialogFactory - generates dialogs * ve.ui.IconButtonWidget - used in inspector for buttons in the head Refactored classes: * ve.ui.Context - moved inspector management to window set * ve.ui.Frame - made iframes initialize asynchronously * ve.ui.Dialog and ve.ui.Inspector - moved initialization to async initialize method Other interesting bits: ve.ui.*Icons*.css, *.svg, *.png, *.ai * Merged icon stylesheets so all icons are available inside windows * Renamed inspector icon to window ve.ui.*.css * Reorganized styles so that different windows can include only what they need * Moved things to where they belonged (some things were in strange places) ve.init.Target.js, ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js * Removed dialog management - dialogs are managed by the surface now ve.ui.*Dialog.js * Renamed title message static property * Added registration ve.ui.*Inspector.js * Switch to accept surface object rather than context, which conforms to the more general window class without losing any functionality (in fact, most of the time the surface was what we actually wanted) ve.ui.MenuWidget.js, ve.ui.MWLinkTargetInputWidget.js * Using surface overly rather than passing an overlay around through constructors Change-Id: Ifd16a1003ff44c48ee7b2c66928cf9cc858b2564
2013-03-13 00:06:57 +00:00
transition: border-color 100ms;
/* Gray */
border: 1px #c9c9c9 solid;
background-color: #ffffff;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#ffffff, endColorstr=#f0f0f0
);
background-image: -webkit-gradient(
linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)
);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
}
.ve-ui-buttonWidget:hover {
border-color: #aaa;
}
.ve-ui-buttonWidget:active {
border-color: #ddd;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
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
color: black;
}
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
.ve-ui-widget-disabled.ve-ui-buttonWidget,
.ve-ui-widget-disabled.ve-ui-buttonWidget:active {
opacity: 0.5;
cursor: default;
box-shadow: none;
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
color: #333;
}
.ve-ui-widget-disabled.ve-ui-buttonWidget:hover {
border-color: #ccc;
box-shadow: none;
}
.ve-ui-buttonWidget .ve-ui-labeledElement-label {
display: inline-block;
vertical-align: middle;
line-height: 1.9em;
}
.ve-ui-flaggableElement-destructive.ve-ui-buttonWidget {
/* Red text */
color: #d45353;
}
.ve-ui-flaggableElement-constructive.ve-ui-buttonWidget {
/* Green */
border: solid 1px #c3e59a;
background-color: #f0fbe1;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#f0fbe1, endColorstr=#c3e59a
);
background-image: -webkit-gradient(
linear, right top, right bottom, color-stop(0%,#f0fbe1), color-stop(100%,#c3e59a)
);
background-image: -webkit-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
background-image: -moz-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
background-image: -ms-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
background-image: -o-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
background-image: linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
}
.ve-ui-flaggableElement-constructive.ve-ui-buttonWidget:hover {
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
border-color: #a6cf74;
}
.ve-ui-flaggableElement-primary.ve-ui-buttonWidget {
/* Blue */
border: solid 1px #b0d9ee;
background-color: #eaf4fa;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#eaf4fa, endColorstr=#b0d9ee
);
background-image: -webkit-gradient(
linear, right top, right bottom, color-stop(0%,#eaf4fa), color-stop(100%,#b0d9ee)
);
background-image: -webkit-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
background-image: -moz-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
background-image: -ms-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
}
.ve-ui-flaggableElement-primary.ve-ui-buttonWidget:hover {
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
border-color: #84b9d4;
(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
}
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
/* ve.ui.SelectWidget */
.ve-ui-selectWidget {
list-style: none;
margin: 0;
padding: 0;
}
/* ve.ui.OptionWidget */
.ve-ui-optionWidget {
position: relative;
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
display: block;
border: none;
list-style: none;
margin: 0;
padding: 0.5em 2em 0.5em 3em;
cursor: pointer;
}
.ve-ui-optionWidget .ve-ui-labeledElement-label {
line-height: 1.5em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
}
Single-click insertion Objectives: * Reduce the number of clicks and mouse maneuvers required to insert media, references or template parameters * Make use of highlighting with mouse movement or arrow key presses, similar to menus, to suggest action when clicked * Improve the way media search results look and feel Changes: ve.ui.SelectWidget.js * Add mouseleave handler to un-highlight when the mouse exits the widget * Document highlight events (already being emitted) ve.ui.SearchWidget.js * Propagate both select and highlight events from results widget * Make arrow keys change highlight instead of selection * Get rid of enter event, make enter key select highlighted item instead * Provide direct access to results widget through getResults method ve.ui.MenuWidget.js * Use the selected item as a starting point if nothing is currently highlighted when adjusting the highlight position ve.ui.Dialog.js * Add footless option to hide the foot element and make the body extend all the way down to the bottom * Remove applyButton, which only some dialogs need, and should be creating themselves, along with other buttons as needed ve.ui.Widget.css * Change highlight and selected colors of option widgets to match other selection colors used elsewhere * Leave selected and highlighted widget looking selected ve.ui.Frame.css * Add background color to combat any color that might have been applied to the frame body in the imported CSS from the parent frame ve.ui.Dialog.css * Add rules for footless mode ve.ui.MWReferenceResultWidget.js, ve.ui.MWParameterResultWidget.js, ve.ui.MWMediaResultWidget.js * Allow highlighting ve.ui.MWParamterSearchWidget.js * Switch from selecting the first item when filtering to highlighting ve-mw/ve.ui.Widget.js * Adjust media result widget styling to better match other elements ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceListDialog.js, ve.ui.MWReferenceEditDialog.js, ve.ui.MWMetaDialog.js ve.ui.MWMediaEditDialog.js * Add apply button, as per it being removed from parent class ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceInsertDialog.js, ve.ui.MWMediaInsertDialog.js * Insert parameter/reference/media on select, instead of clicking an insert button * Use 'insert' instead of 'apply' as argument for close method Bug: 50774 Bug: 51143 Change-Id: Ia18e79f1f8df2540f465468edb01f5ce989bf843
2013-07-15 21:07:53 +00:00
.ve-ui-optionWidget-highlighted {
background-color: #e1f3ff;
}
.ve-ui-optionWidget-selected {
Single-click insertion Objectives: * Reduce the number of clicks and mouse maneuvers required to insert media, references or template parameters * Make use of highlighting with mouse movement or arrow key presses, similar to menus, to suggest action when clicked * Improve the way media search results look and feel Changes: ve.ui.SelectWidget.js * Add mouseleave handler to un-highlight when the mouse exits the widget * Document highlight events (already being emitted) ve.ui.SearchWidget.js * Propagate both select and highlight events from results widget * Make arrow keys change highlight instead of selection * Get rid of enter event, make enter key select highlighted item instead * Provide direct access to results widget through getResults method ve.ui.MenuWidget.js * Use the selected item as a starting point if nothing is currently highlighted when adjusting the highlight position ve.ui.Dialog.js * Add footless option to hide the foot element and make the body extend all the way down to the bottom * Remove applyButton, which only some dialogs need, and should be creating themselves, along with other buttons as needed ve.ui.Widget.css * Change highlight and selected colors of option widgets to match other selection colors used elsewhere * Leave selected and highlighted widget looking selected ve.ui.Frame.css * Add background color to combat any color that might have been applied to the frame body in the imported CSS from the parent frame ve.ui.Dialog.css * Add rules for footless mode ve.ui.MWReferenceResultWidget.js, ve.ui.MWParameterResultWidget.js, ve.ui.MWMediaResultWidget.js * Allow highlighting ve.ui.MWParamterSearchWidget.js * Switch from selecting the first item when filtering to highlighting ve-mw/ve.ui.Widget.js * Adjust media result widget styling to better match other elements ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceListDialog.js, ve.ui.MWReferenceEditDialog.js, ve.ui.MWMetaDialog.js ve.ui.MWMediaEditDialog.js * Add apply button, as per it being removed from parent class ve.ui.MWTransclusionDialog.js, ve.ui.MWReferenceInsertDialog.js, ve.ui.MWMediaInsertDialog.js * Insert parameter/reference/media on select, instead of clicking an insert button * Use 'insert' instead of 'apply' as argument for close method Bug: 50774 Bug: 51143 Change-Id: Ia18e79f1f8df2540f465468edb01f5ce989bf843
2013-07-15 21:07:53 +00:00
background-color: #a7dcff;
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
}
.ve-ui-optionWidget.ve-ui-widget-disabled {
cursor: default;
}
.ve-ui-optionWidget .ve-ui-optionWidget-icon {
position: absolute;
top: 50%;
left: 0.5em;
width: 2em;
height: 2em;
margin-top: -1em;
background-repeat: no-repeat;
background-position: center center;
}
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
/* ve.ui.OutlineItemWidget */
.ve-ui-outlineItemWidget {
position: relative;
padding: 0.75em 0.75em 0.75em 3.5em;
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
font-size: 1.1em;
}
.ve-ui-outlineItemWidget-level-1 {
padding-left: 5em;
}
.ve-ui-outlineItemWidget-level-2 {
padding-left: 6.5em;
}
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
.ve-ui-outlineItemWidget.ve-ui-optionWidget-selected {
background-color: #a7dcff;
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.ve-ui-outlineItemWidget-level-0 .ve-ui-optionWidget-icon {
left: 1em;
}
.ve-ui-outlineItemWidget-level-1 .ve-ui-optionWidget-icon {
left: 2.5em;
}
.ve-ui-outlineItemWidget-level-2 .ve-ui-optionWidget-icon {
left: 4em;
}
Outline controls Objectives: * Allow reordering items in outline widgets using an outline control widget * Use an outline control widget to reorder transclusion parts Changes: ve.ui.SelectWidget.js * Emit add and remove events ve.ui.OutlineItemWidget.js * Add movable config options * Add isMovable method ve.ui.OutlineControlsWidget.js * New class * Displays move up/down buttons which are synchronized with an outline widget * Doesn't actually move items (since an outline widget is probably data-driven) just emits events ve.ui.Widget.css * Add disabled style for icon button widgets * Add styles for outline controls widget ve.ui.Icons*.css * Add missing icon styles ve.ui.Dialog.css * Add styles for outline and controls in editable paged dialogs ve.ui.GroupElement.js * Fix bug where items are insertions are in the wrong place when "moving" them ve.ui.PagedDialog.js * Add editable config option which shows outline controls under the outline * Pass through movable config option when creating pages ve.ui.MWTranclusionDialog.js * Configure paged dialog outline as editable * Add initialize method to connect outline controls widget events * Make addPart method automatically add parameters when templates are added * Add handler for outline controls move event which re-orders parts * Make parts movable (params are automatically ordered, so they aren't movable) ve.dm.MWTransclusionModel.js * Add addPart method and use it within the addContent and addTemplate methods * Fix documentation lies * Add getPartFromId method *.php * Add links to new files and messages Change-Id: I919d4c3e9b85d07a97a99c0b2e8739a859bdf2b1
2013-06-14 00:46:45 +00:00
/* ve.ui.OutlineControlsWidget */
.ve-ui-outlineControlsWidget {
height: 3em;
background-color: #fff;
}
.ve-ui-outlineControlsWidget-adders,
.ve-ui-outlineControlsWidget-movers {
float: left;
Outline controls Objectives: * Allow reordering items in outline widgets using an outline control widget * Use an outline control widget to reorder transclusion parts Changes: ve.ui.SelectWidget.js * Emit add and remove events ve.ui.OutlineItemWidget.js * Add movable config options * Add isMovable method ve.ui.OutlineControlsWidget.js * New class * Displays move up/down buttons which are synchronized with an outline widget * Doesn't actually move items (since an outline widget is probably data-driven) just emits events ve.ui.Widget.css * Add disabled style for icon button widgets * Add styles for outline controls widget ve.ui.Icons*.css * Add missing icon styles ve.ui.Dialog.css * Add styles for outline and controls in editable paged dialogs ve.ui.GroupElement.js * Fix bug where items are insertions are in the wrong place when "moving" them ve.ui.PagedDialog.js * Add editable config option which shows outline controls under the outline * Pass through movable config option when creating pages ve.ui.MWTranclusionDialog.js * Configure paged dialog outline as editable * Add initialize method to connect outline controls widget events * Make addPart method automatically add parameters when templates are added * Add handler for outline controls move event which re-orders parts * Make parts movable (params are automatically ordered, so they aren't movable) ve.dm.MWTransclusionModel.js * Add addPart method and use it within the addContent and addTemplate methods * Fix documentation lies * Add getPartFromId method *.php * Add links to new files and messages Change-Id: I919d4c3e9b85d07a97a99c0b2e8739a859bdf2b1
2013-06-14 00:46:45 +00:00
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 3em;
padding: 0.5em;
}
.ve-ui-outlineControlsWidget-adders {
float: left;
}
.ve-ui-outlineControlsWidget-movers {
float: right;
}
.ve-ui-outlineControlsWidget-adders .ve-ui-iconButtonWidget {
Outline controls Objectives: * Allow reordering items in outline widgets using an outline control widget * Use an outline control widget to reorder transclusion parts Changes: ve.ui.SelectWidget.js * Emit add and remove events ve.ui.OutlineItemWidget.js * Add movable config options * Add isMovable method ve.ui.OutlineControlsWidget.js * New class * Displays move up/down buttons which are synchronized with an outline widget * Doesn't actually move items (since an outline widget is probably data-driven) just emits events ve.ui.Widget.css * Add disabled style for icon button widgets * Add styles for outline controls widget ve.ui.Icons*.css * Add missing icon styles ve.ui.Dialog.css * Add styles for outline and controls in editable paged dialogs ve.ui.GroupElement.js * Fix bug where items are insertions are in the wrong place when "moving" them ve.ui.PagedDialog.js * Add editable config option which shows outline controls under the outline * Pass through movable config option when creating pages ve.ui.MWTranclusionDialog.js * Configure paged dialog outline as editable * Add initialize method to connect outline controls widget events * Make addPart method automatically add parameters when templates are added * Add handler for outline controls move event which re-orders parts * Make parts movable (params are automatically ordered, so they aren't movable) ve.dm.MWTransclusionModel.js * Add addPart method and use it within the addContent and addTemplate methods * Fix documentation lies * Add getPartFromId method *.php * Add links to new files and messages Change-Id: I919d4c3e9b85d07a97a99c0b2e8739a859bdf2b1
2013-06-14 00:46:45 +00:00
float: left;
}
.ve-ui-outlineControlsWidget-movers .ve-ui-iconButtonWidget {
Outline controls Objectives: * Allow reordering items in outline widgets using an outline control widget * Use an outline control widget to reorder transclusion parts Changes: ve.ui.SelectWidget.js * Emit add and remove events ve.ui.OutlineItemWidget.js * Add movable config options * Add isMovable method ve.ui.OutlineControlsWidget.js * New class * Displays move up/down buttons which are synchronized with an outline widget * Doesn't actually move items (since an outline widget is probably data-driven) just emits events ve.ui.Widget.css * Add disabled style for icon button widgets * Add styles for outline controls widget ve.ui.Icons*.css * Add missing icon styles ve.ui.Dialog.css * Add styles for outline and controls in editable paged dialogs ve.ui.GroupElement.js * Fix bug where items are insertions are in the wrong place when "moving" them ve.ui.PagedDialog.js * Add editable config option which shows outline controls under the outline * Pass through movable config option when creating pages ve.ui.MWTranclusionDialog.js * Configure paged dialog outline as editable * Add initialize method to connect outline controls widget events * Make addPart method automatically add parameters when templates are added * Add handler for outline controls move event which re-orders parts * Make parts movable (params are automatically ordered, so they aren't movable) ve.dm.MWTransclusionModel.js * Add addPart method and use it within the addContent and addTemplate methods * Fix documentation lies * Add getPartFromId method *.php * Add links to new files and messages Change-Id: I919d4c3e9b85d07a97a99c0b2e8739a859bdf2b1
2013-06-14 00:46:45 +00:00
float: right;
}
.ve-ui-outlineControlsWidget-adders:not(:hover) .ve-ui-iconButtonWidget:not(:first-child) {
opacity: 0;
}
.ve-ui-outlineControlsWidget-adders:hover .ve-ui-iconButtonWidget:first-child {
opacity: 0.25;
cursor: default;
}
/* ve.ui.InputLabelWidget */
.ve-ui-inputLabelWidget {
padding: 0.5em 0;
}
/* ve.ui.TextInputWidget */
Category UI improvements Objectives: * Ensure items don't get moved to the end when their sort-key is edited * Add placeholder text and pending styling to input * Auto-expand input to the end of the line * Make the minimum input width smaller Changes: ve.ui.MWMetaDialog.js * Added calls to fitInput on initialize * Fixed sort key update and insert handlers to maintain item position when updating ve.ui.GroupElement.js * Added index argument to addItems, allowing items to be inserted at a specific location ve.ui.PagePanelLayout.js * Fixed CSS class name ve.ui.StackPanelLayout.js, ve.ui.MenuWidget.js, ve.ui.SelectWidget.js * Passed index argument through to group element ve.ui.PanelLayout.js * Fixed overflow direction for scrolling option ve.ui.Inspector.css * Moved border-box properties to text input widget class * Set input widget within inspectors to be 100% by default ve.ui.Layout.css * Updated CSS class name * Whitespace fixes ve.ui.Widget.css * Made text input widgets's wrapper default to 20em wide and the input inside it be 100%, using border-box to ensure proper sizing * Adjusted category list item and input styles to make input appear more like a category item * Whitespace fixes ve.ui.MWCategoryInputWidget.js * Made category input widget inherit text input widget, rather than just input widget ve.ui.MWCategoryWidget.js * Replaced group functionality by mixing in group element * Added fitInput, which automatically make the input fill the rest of the line or take up the entire next line depending on how much space is left VisualEditor.i18n.php * Adjusted placeholder text for category input Change-Id: I79a18a7b849804027473084a42c36133fdacad57
2013-05-03 18:30:33 +00:00
.ve-ui-textInputWidget {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20em;
position: relative;
}
.ve-ui-textInputWidget input,
.ve-ui-textInputWidget input:focus[readonly],
.ve-ui-widget-disabled.ve-ui-textInputWidget input:focus,
.ve-ui-textInputWidget textarea,
.ve-ui-textInputWidget textarea:focus[readonly],
.ve-ui-widget-disabled.ve-ui-textInputWidget textarea:focus {
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;
Category UI improvements Objectives: * Ensure items don't get moved to the end when their sort-key is edited * Add placeholder text and pending styling to input * Auto-expand input to the end of the line * Make the minimum input width smaller Changes: ve.ui.MWMetaDialog.js * Added calls to fitInput on initialize * Fixed sort key update and insert handlers to maintain item position when updating ve.ui.GroupElement.js * Added index argument to addItems, allowing items to be inserted at a specific location ve.ui.PagePanelLayout.js * Fixed CSS class name ve.ui.StackPanelLayout.js, ve.ui.MenuWidget.js, ve.ui.SelectWidget.js * Passed index argument through to group element ve.ui.PanelLayout.js * Fixed overflow direction for scrolling option ve.ui.Inspector.css * Moved border-box properties to text input widget class * Set input widget within inspectors to be 100% by default ve.ui.Layout.css * Updated CSS class name * Whitespace fixes ve.ui.Widget.css * Made text input widgets's wrapper default to 20em wide and the input inside it be 100%, using border-box to ensure proper sizing * Adjusted category list item and input styles to make input appear more like a category item * Whitespace fixes ve.ui.MWCategoryInputWidget.js * Made category input widget inherit text input widget, rather than just input widget ve.ui.MWCategoryWidget.js * Replaced group functionality by mixing in group element * Added fitInput, which automatically make the input fill the rest of the line or take up the entire next line depending on how much space is left VisualEditor.i18n.php * Adjusted placeholder text for category input Change-Id: I79a18a7b849804027473084a42c36133fdacad57
2013-05-03 18:30:33 +00:00
-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;
Context, frame, window, dialog and inspector refactor This is a major refactor of user interface context, frame, dialog and inspector classes, including adding several new classes which generalize managing inspectors/dialogs (which are now subclasses of window). New classes: * ve.ui.Window.js - base class for inspector and dialog classes * ve.ui.WindowSet.js - manages mutually exclusive windows, used by surface and context for dialogs and inspectors respectively * ve.ui.DialogFactory - generates dialogs * ve.ui.IconButtonWidget - used in inspector for buttons in the head Refactored classes: * ve.ui.Context - moved inspector management to window set * ve.ui.Frame - made iframes initialize asynchronously * ve.ui.Dialog and ve.ui.Inspector - moved initialization to async initialize method Other interesting bits: ve.ui.*Icons*.css, *.svg, *.png, *.ai * Merged icon stylesheets so all icons are available inside windows * Renamed inspector icon to window ve.ui.*.css * Reorganized styles so that different windows can include only what they need * Moved things to where they belonged (some things were in strange places) ve.init.Target.js, ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js * Removed dialog management - dialogs are managed by the surface now ve.ui.*Dialog.js * Renamed title message static property * Added registration ve.ui.*Inspector.js * Switch to accept surface object rather than context, which conforms to the more general window class without losing any functionality (in fact, most of the time the surface was what we actually wanted) ve.ui.MenuWidget.js, ve.ui.MWLinkTargetInputWidget.js * Using surface overly rather than passing an overlay around through constructors Change-Id: Ifd16a1003ff44c48ee7b2c66928cf9cc858b2564
2013-03-13 00:06:57 +00:00
-moz-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
-ms-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
-o-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
Context, frame, window, dialog and inspector refactor This is a major refactor of user interface context, frame, dialog and inspector classes, including adding several new classes which generalize managing inspectors/dialogs (which are now subclasses of window). New classes: * ve.ui.Window.js - base class for inspector and dialog classes * ve.ui.WindowSet.js - manages mutually exclusive windows, used by surface and context for dialogs and inspectors respectively * ve.ui.DialogFactory - generates dialogs * ve.ui.IconButtonWidget - used in inspector for buttons in the head Refactored classes: * ve.ui.Context - moved inspector management to window set * ve.ui.Frame - made iframes initialize asynchronously * ve.ui.Dialog and ve.ui.Inspector - moved initialization to async initialize method Other interesting bits: ve.ui.*Icons*.css, *.svg, *.png, *.ai * Merged icon stylesheets so all icons are available inside windows * Renamed inspector icon to window ve.ui.*.css * Reorganized styles so that different windows can include only what they need * Moved things to where they belonged (some things were in strange places) ve.init.Target.js, ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js * Removed dialog management - dialogs are managed by the surface now ve.ui.*Dialog.js * Renamed title message static property * Added registration ve.ui.*Inspector.js * Switch to accept surface object rather than context, which conforms to the more general window class without losing any functionality (in fact, most of the time the surface was what we actually wanted) ve.ui.MenuWidget.js, ve.ui.MWLinkTargetInputWidget.js * Using surface overly rather than passing an overlay around through constructors Change-Id: Ifd16a1003ff44c48ee7b2c66928cf9cc858b2564
2013-03-13 00:06:57 +00:00
transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
}
.ve-ui-textInputWidget-pending input,
.ve-ui-textInputWidget-pending textarea {
background-color: transparent;
}
.ve-ui-textInputWidget input:focus,
.ve-ui-textInputWidget textarea:focus {
outline: none;
border-color: #a7dcff;
box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
background-color: #fff;
}
.ve-ui-textInputWidget input[readonly],
.ve-ui-textInputWidget textarea[readonly] {
color: #777;
text-shadow: 0 1px 1px #fff;
}
.ve-ui-widget-disabled.ve-ui-textInputWidget input,
.ve-ui-widget-disabled.ve-ui-textInputWidget input:focus,
.ve-ui-widget-disabled.ve-ui-textInputWidget textarea,
.ve-ui-widget-disabled.ve-ui-textInputWidget textarea:focus {
color: #ccc;
text-shadow: 0 1px 1px #fff;
}
.ve-ui-textInputWidget-decorated input,
.ve-ui-textInputWidget-decorated textarea {
padding-left: 2em;
}
.ve-ui-textInputWidget-icon {
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 100%;
background-position: right center;
background-repeat: no-repeat;
}
/* 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],
.ve-ui-widget-disabled.ve-ui-langInputWidget input:focus,
.ve-ui-langInputWidget textarea,
.ve-ui-langInputWidget textarea:focus[readonly],
.ve-ui-widget-disabled.ve-ui-langInputWidget textarea:focus {
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;
-ms-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;
}
.ve-ui-widget-disabled.ve-ui-langInputWidget input,
.ve-ui-widget-disabled.ve-ui-langInputWidget input:focus,
.ve-ui-widget-disabled.ve-ui-langInputWidget textarea,
.ve-ui-widget-disabled.ve-ui-langInputWidget textarea:focus {
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;
}
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
/* ve.ui.MenuWidget */
(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
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
.ve-ui-menuWidget {
(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
position: absolute;
background: #fff;
(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
margin-top: -1px;
border: solid 1px #ccc;
border-radius: 0 0 0.25em 0.25em;
box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
}
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
.ve-ui-menuWidget input {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
}
/* ve.ui.MenuItemWidget */
.ve-ui-menuItemWidget {
position: relative;
}
.ve-ui-menuItemWidget .ve-ui-optionWidget-icon {
display: none;
}
.ve-ui-menuItemWidget.ve-ui-optionWidget-selected .ve-ui-optionWidget-icon {
display: block;
(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
}
Link inspector bug fixes Formerly known as "The greatest commit in the history of the world*". * Within a 3 block radius of Drayton Park and Auburt Park, starting from July 30th at about 9pm or so. Bugs: * (bug 51404) Allow escaping out of the link inspector when in creation mode (no text is selected, text will be inserted based on link target) and the text input is empty * (bug 51065 and bug 51415) Keep model and view in sync when changing the link inspector's text input value and showing options in a menu * (bug 51523) Either restore selection at the time of close to what it was before opening the inspector (when using back) or to what it was before closing (might be changed by transactions processed during the close method) - this makes it simpler and more natural when clicking away from the link inspector, even when there are changes that must be saved by the link inspector on close Bonus: * Use only the light blue highlight color for menu widget items - the checkmark already displays the selected item, the dark blue is just masking the current highlight position and confusing the peoples * Remove links when the user deletes everything from the link inspector's text input and then closes the link inspector * Replace select menu's evil "silent" selectItem/highlightItem argument with a new method called initializeSelection which sets both selection and highlighting to an item without emitting events - this is needed when synchronizing the view with the model so the model isn't immediately told to change to a value it already has * Make the MWTitle lookup menu not flash like crazy as you type (this was caused by a copy-paste oversight overriding initializeLookupMenuSelection unnecessarily) Bug: 51404 Bug: 51065 Bug: 51415 Bug: 51523 Change-Id: I339d9253ad472c2f42c3179edc84a83d27561270
2013-07-30 22:06:35 +00:00
.ve-ui-menuItemWidget.ve-ui-optionWidget-selected {
background-color: transparent;
}
.ve-ui-menuItemWidget.ve-ui-optionWidget-highlighted {
background-color: #e1f3ff;
}
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
/* ve.ui.MenuSectionItemWidget */
(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
Group, Select, Option, Outline and MenuSection widgets Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes. ve.ui.Dialog.css * Make dialog a fixed width and have a minimum and maximum height while always being centered in the window. * Add style for the outline panel * Add border below the title * Move font-size adjustment to child elements to preserve layout scale ve.ui.Inspector.css * Make inspectors fade in when being opened (will happen after the size transition is complete) * Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading ve.ui.Tool.css * Update classes according to changes in labeled widgets ve.ui.Widget.css * Add display: block to widget labels to support use of autoEllipsis on them * Update classes according to changes in labeled widgets * Add styles for new select, option and outline item widgets * Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in) ve.ui.Window.css.js * Moved selection disabling rules up to the head to prevent selection drawing around the title ve.ui.GroupWidget.js * New widget that manages "items", allowing getting, adding, removing and clearing ve.ui.MenuSectionItemWidget.js * New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu ve.ui.OptionWidget.js * New widget to be used with select widgets, provides select and highlight functionality ve.ui.OutlineItemWidget.js * New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label ve.ui.OutlineWidget.js * New widget that provides a vertically stacked list of mutually exclusive options, extends select ve.ui.SelectWidget.js * New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally ve.ui.MetaDialog.js * Hacked in support for an outline widget in the outline pane * Added classes for styling purposes ve.ui.FormatDropDownTool.js * Modified call to menu item constructor as per changes therein * Reorganized options config to make construction simpler * Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item ve.ui.DropDownTool.js * Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame * Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property ve.ui.Context.js * Improve context/inspector behavior in regards to initial sizing ve.ui.js * Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$ ve.ui.Window.js * Fixed incorrect case for boolean type in comment * Added getFrame method ve.ui.ButtonWidget.js * Removed extra class being set on label ve.ui.LabeledWidget.js * Added class on label * Added fitLabel method which uses autoEllipsis internally ve.ui.MenuItemWidget.js * Moved nearly all of the implementation to option so it could be reused ve.ui.Menu.js * Moved most of the implementation to select and group ve.ui.MWLinkTargetInputWidget * Prevent aborting and re-querying if the value hasn't actually changed * Updated populateMenu method as per changes in menu class *.php * Added links to new files Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-19 22:59:49 +00:00
.ve-ui-menuSectionItemWidget {
padding: 0.33em 0.75em;
color: #888;
cursor: default;
(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
}
/* ve.ui.PopupWidget */
.ve-ui-popupWidget-callout {
position: absolute;
/* @embed */
background-image: url(images/callout.svg);
background-repeat: no-repeat;
width: 15px;
height: 8px;
margin-left: -7px;
}
.ve-ui-popupWidget-body {
margin-top: 7px;
position: absolute;
overflow: hidden;
border: solid 1px #ccc;
border-radius: 0.25em;
background-color: #fff;
box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
}
.ve-ui-popupWidget-transitioning .ve-ui-popupWidget-body {
-webkit-transition: width 100ms, height 100ms, left 100ms;
-moz-transition: width 100ms, height 100ms, left 100ms;
-ms-transition: width 100ms, height 100ms, left 100ms;
-o-transition: width 100ms, height 100ms, left 100ms;
transition: width 100ms, height 100ms, left 100ms;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.ve-ui-popupWidget-body:focus {
/* No outline. The body has a tabindex and is focused on show */
outline: none;
}
/* ve.ui.SearchWidget */
.ve-ui-searchWidget-query {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4em;
padding: 0 1em;
box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
}
.ve-ui-searchWidget-query .ve-ui-textInputWidget {
width: 100%;
margin: 0.75em 0;
}
.ve-ui-searchWidget-results {
position: absolute;
top: 4em;
bottom: 0;
left: 0;
right: 0;
padding: 1em;
overflow-x: hidden;
overflow-y: auto;
line-height: 0;
}
/* ve.ui.SurfaceWidget.js */
.ve-ui-surfaceWidget-toolbar {
font-size: 1.25em;
}
.ve-ui-surfaceWidget-toolbar .ve-ui-toolbar-bar {
border: solid 1px #ddd;
border-radius: 0.25em;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-width: 0;
}