JSDuck: Generated code documentation!
See CODING.md for how to run it.
Mistakes fixed:
* Warning: Unknown type function
-> Function
* Warning: Unknown type DOMElement
-> HTMLElement
* Warning: Unknown type DOM Node
-> HTMLElement
* Warning: Unknown type Integer
-> Mixed
* Warning: Unknown type Command
-> ve.Command
* Warning: Unknown type any
-> number
* Warning: Unknown type ve.Transaction
-> ve.dm.Transaction
* Warning: Unknown type ve.dm.AnnotationSet
-> ve.AnnotationSet
* Warning: Unknown type false
-> boolean
* Warning: Unknown type ve.dm.AlienNode
ve.dm doesn't have a generic AlienNode like ve.ce
-> Unknown type ve.dm.AlienInlineNode|ve.dm.AlienBlockNode
* Warning: Unknown type ve.ve.Surface
-> ve.ce.Surface
* ve.example.lookupNode:
-> Last @param should be @return
* ve.dm.Transaction.prototype.pushReplace:
-> @param {Array] should be @param {Array}
* Warning: ve.BranchNode.js:27: {@link ve.Node#hasChildren} links to non-existing member
-> (removed)
* Warning: ve.LeafNode.js:21: {@link ve.Node#hasChildren} links to non-existing member
-> (removed)
Differences fixed:
* Variadic arguments are like @param {Type...} [name]
instead of @param {Type} [name...]
* Convert all file headers from /** to /*! because JSDuck tries
to parse all /** blocks and fails to parse with all sorts of
errors for "Global property", "Unnamed property", and
"Duplicate property".
Find: \/\*\*([^@]+)(@copyright)
Replace: /*!$1$2
* Indented blocks are considered code examples.
A few methods had documentation with numbered lists that were
indented, which have now been updated to not be intended.
* The free-form text descriptions are parsed with Markdown,
which requires lists to be separated from paragraphs by an
empty line.
And we should use `backticks` instead of {braces} for inline
code in text paragraphs.
* Doc blocks for classes and their constructor have to be
in the correct order (@constructor, @param, @return must be
before @class, @abstract, @extends etc.)
* `@extends Class` must not have Class {wrapped}
* @throws must start with a {Type}
* @example means something else. It is used for an inline demo
iframe, not code block. For that simply indent with spaces.
* @member means something else.
Non-function properties are marked with @property, not @member.
* To create a link to a class or member, in most cases the name
is enough to create a link. E.g. Foo, Foo.bar, Foo.bar#quux,
where a hash stands for "instance member", so Foo.bar#quux,
links to Foo.bar.prototype.quux (the is not supported, as
"prototype" is considered an implementation detail, it only
indexes class name and method name).
If the magic linker doesn't work for some case, the
verbose syntax is {@link #target label}.
* @property can't have sub-properties (nested @param and @return
values are supported, only @static @property can't be nested).
We only have one case of this, which can be worked around by
moving those in a new virtual class. The code is unaltered
(only moved down so that it isn't with the scope of the main
@class block). ve.dm.TransactionProcessor.processors.
New:
* @mixins: Classes mixed into the current class.
* @event: Events that can be emitted by a class. These are also
inherited by subclasses. (+ @param, @return and @preventable).
So ve.Node#event-attach is inherited to ve.dm.BreakNode,
just like @method is.
* @singleton: Plain objects such as ve, ve.dm, ve.ce were missing
documentation causing a tree error. Documented those as a
JSDuck singleton, which they but just weren't documented yet.
NB: Members of @singleton don't need @static (if present,
triggers a compiler warning).
* @chainable: Shorthand for "@return this". We were using
"@return {classname}" which is ambiguous (returns the same
instance or another instance?), @chainable is specifically
for "@return this". Creates proper labels in the generated
HTML pages.
Removed:
* @mixin: (not to be confused with @mixins). Not supported by
JSDuck. Every class is standalone anyway. Where needed marked
them @class + @abstract instead.
Change-Id: I6a7c9e8ee8f995731bc205d666167874eb2ebe23
2013-01-04 08:54:17 +00:00
|
|
|
/*!
|
2013-01-15 23:38:49 +00:00
|
|
|
* VisualEditor MediaWiki Initialization ViewPageTarget styles.
|
2012-07-19 21:25:16 +00:00
|
|
|
*
|
2013-02-19 23:37:34 +00:00
|
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
2012-07-19 00:11:26 +00:00
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
|
*/
|
|
|
|
|
|
2012-08-15 23:35:52 +00:00
|
|
|
/* VisualEditor */
|
|
|
|
|
|
(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-menuWidget {
|
2012-08-27 21:34:08 +00:00
|
|
|
font-size: 0.9em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.ve-init-mw-viewPageTarget-pageTitle {
|
2012-06-14 21:31:08 +00:00
|
|
|
-webkit-transition: opacity 200ms ease-out;
|
|
|
|
|
-moz-transition: opacity 200ms ease-out;
|
2012-12-11 00:26:09 +00:00
|
|
|
-ms-transition: opacity 200ms ease-out;
|
2012-06-14 21:31:08 +00:00
|
|
|
-o-transition: opacity 200ms ease-out;
|
|
|
|
|
transition: opacity 200ms ease-out;
|
2012-06-14 01:26:21 +00:00
|
|
|
cursor: default;
|
2012-06-12 01:21:31 +00:00
|
|
|
}
|
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-loading {
|
2012-06-11 20:24:20 +00:00
|
|
|
width: 128px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
float: right;
|
2012-06-11 06:54:41 +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
|
|
|
/* Toolbar */
|
|
|
|
|
|
2013-05-14 23:45:42 +00:00
|
|
|
.ve-ui-toolbar-actions .ve-ui-buttonWidget {
|
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
|
|
|
margin-left: 0.25em;
|
|
|
|
|
margin-right: 0.25em;
|
|
|
|
|
margin-top: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-12 01:17:10 +00:00
|
|
|
/* Beta notices */
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-toolbar-betaNotice {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -0.5em;
|
|
|
|
|
top: 30px;
|
|
|
|
|
width: 11em;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
border: solid 1px #ccc;
|
|
|
|
|
padding: 0.5em 1.25em 0 1.25em;
|
|
|
|
|
border-radius: 0.25em;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
|
|
|
|
|
z-index: 3;
|
|
|
|
|
line-height: 1.5em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
/* Edit notices */
|
|
|
|
|
|
2012-11-30 23:09:34 +00:00
|
|
|
.ve-init-mw-viewPageTarget-toolbar-editNotices {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -0.5em;
|
|
|
|
|
top: 30px;
|
|
|
|
|
width: 29em;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
border: solid 1px #ccc;
|
2013-06-12 01:17:10 +00:00
|
|
|
padding: 0 1.75em 0 0.75em;
|
2012-11-30 23:09:34 +00:00
|
|
|
border-radius: 0.25em;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
|
|
|
|
|
z-index: 3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-toolbar-editNotices-notice {
|
|
|
|
|
padding: 0.5em 0;
|
|
|
|
|
line-height: 1.5em;
|
|
|
|
|
border-top: solid 1px #ccc;
|
|
|
|
|
margin-top: -1px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 01:44:44 +00:00
|
|
|
/* Tools */
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-tool {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
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
|
|
|
line-height: 2.8em;
|
2012-12-11 01:44:44 +00:00
|
|
|
margin-right: 1em;
|
|
|
|
|
padding-left: 30px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: left center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-tool-label {
|
|
|
|
|
color: #555555;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-12 01:17:10 +00:00
|
|
|
.ve-init-mw-viewPageTarget-tool-beta-label {
|
|
|
|
|
color: #aaaaaa;
|
|
|
|
|
font-size: 120%;
|
|
|
|
|
font-variant: small-caps;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 01:44:44 +00:00
|
|
|
.ve-init-mw-viewPageTarget-tool:hover .ve-init-mw-viewPageTarget-tool-label {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
/* Save dialog styles */
|
2012-08-17 19:30:33 +00:00
|
|
|
|
2013-06-20 00:28:51 +00:00
|
|
|
.ve-init-mw-viewPageTarget-toolbarTracker {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
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-init-mw-viewPageTarget-saveDialog .ve-ui-buttonWidget {
|
2012-08-17 23:01:17 +00:00
|
|
|
float: right;
|
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
|
|
|
margin-left: 0.5em;
|
2012-06-11 06:54:41 +00:00
|
|
|
font-size: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-working {
|
|
|
|
|
display: none;
|
|
|
|
|
float: right;
|
|
|
|
|
height: 2em;
|
|
|
|
|
width: 128px;
|
|
|
|
|
margin-right: 1em;
|
|
|
|
|
background-position: right center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog {
|
2012-06-13 21:44:39 +00:00
|
|
|
display: none;
|
2012-06-12 17:32:10 +00:00
|
|
|
top: 0.25em;
|
2012-06-12 01:21:31 +00:00
|
|
|
right: 0.5em;
|
2012-06-11 06:54:41 +00:00
|
|
|
width: 29em;
|
2012-12-07 16:23:23 +00:00
|
|
|
min-width: 29em;
|
2012-11-05 18:32:09 +00:00
|
|
|
font-family: sans-serif;
|
|
|
|
|
position: absolute;
|
|
|
|
|
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);
|
2012-12-11 03:04:01 +00:00
|
|
|
padding: 2.5em 0.75em 0.75em 0.75em;
|
|
|
|
|
margin: 0 0 0 0.5em;
|
2012-11-05 18:32:09 +00:00
|
|
|
z-index: 3;
|
2012-12-07 16:23:23 +00:00
|
|
|
|
|
|
|
|
/* slide-diff can get quite long, handle overflow */
|
|
|
|
|
/* max-height set from javascript */
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-head {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0.4em;
|
|
|
|
|
left: 0.5em;
|
|
|
|
|
right: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-title {
|
|
|
|
|
height: 2em;
|
|
|
|
|
line-height: 2em;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 0.9em;
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 0 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-prevButton {
|
|
|
|
|
float: left;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 0.1em;
|
|
|
|
|
width: 1.5em;
|
|
|
|
|
height: 1.5em;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
filter: alpha(opacity=8);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
/* @see ve.init.mw.Icons */
|
|
|
|
|
background-position: left top;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
padding-right: 0.5em;
|
|
|
|
|
border-right: 1px solid #eee;
|
|
|
|
|
margin-right: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-closeButton {
|
|
|
|
|
float: right;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 0.1em;
|
|
|
|
|
width: 1.5em;
|
|
|
|
|
height: 1.5em;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
filter: alpha(opacity=8);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
/* @see ve.init.mw.Icons */
|
|
|
|
|
background-position: right top;
|
|
|
|
|
background-repeat: no-repeat;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-body {
|
Kranitor #3: jQuerlyfornication ft. The Cascaders
* Classicifation (JS)
Use addClass instead of attr( 'class' ) whenever possible.
addClass will manipulate the properties directly instead of
(re-)setting an attribute which (most) browsers then sync
with the properties.
Difference between:
elem.className
and
elem.setAttribute( 'class', .. );
Just like .checked, .value, .disabled and other interactive
properties, the HTML attributes should only be used for initial
values from the html document. When in javascript, only set
properties. Attributes are either ignored or slow.
* Styling (JS)
Use .css() instead of attr( 'style' ).
Again, setting properties instead of attributes is much faster,
easier and safer. And this way it takes care of cross-browser
issues where applicable, and less prone to error due to dealing
with key-value pairs instead of css strings.
Difference between:
elem.style.foo = 'bar';
and
elem.setAttribute( 'style', 'foo: bar;' );
* Finding (JS)
Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ).
It is CSS!
* Vendor prefixes (CSS)
It is important to always list newer (standards-compliant) versions
*after* the older/prefixed variants.
See also http://css-tricks.com/ordering-css3-properties/
So the following three:
-webkit-gradient (Chrome, Safari 4)
-webkit-linear-gradient (Chrome 10, Safari 5+)
linear-gradient (CSS3 standard)
... must be in that order.
Notes:
- "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8)
Has not been renamed to "opacity" since Firefox 0.9.
- Removed redundant "-moz-opacity"
- Added "filter: alpha(opacity=**);" where missing
- Fixed order of css3 properties (old to new)
- Add standardized css3 versions where missing
(some 'border-radius' groups didn't have the non-prefixed version)
- Spacing
- @embed
- Shorten hex colors where possible (#dddddd -> #ddd)
$ ack '#([0-9a-f])\1{5}' --css
$ ack '#([0-9a-f])\1{2};' --css
Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
|
|
|
border-top: 1px solid #ddd;
|
2012-12-07 16:23:23 +00:00
|
|
|
padding-top: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 22:13:54 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide-review .ve-init-mw-viewPageTarget-saveDialog-viewer {
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide-review .ve-init-mw-viewPageTarget-saveDialog-viewer pre {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide-review .ve-init-mw-viewPageTarget-saveDialog-viewer .diff {
|
2012-12-07 16:23:23 +00:00
|
|
|
font-size: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-foot {
|
|
|
|
|
padding-top: 1em;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-license,
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report-notice {
|
2012-06-11 06:54:41 +00:00
|
|
|
font-size: 0.7em;
|
2012-08-17 19:30:33 +00:00
|
|
|
line-height: 1.25em;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
Kranitor #3: jQuerlyfornication ft. The Cascaders
* Classicifation (JS)
Use addClass instead of attr( 'class' ) whenever possible.
addClass will manipulate the properties directly instead of
(re-)setting an attribute which (most) browsers then sync
with the properties.
Difference between:
elem.className
and
elem.setAttribute( 'class', .. );
Just like .checked, .value, .disabled and other interactive
properties, the HTML attributes should only be used for initial
values from the html document. When in javascript, only set
properties. Attributes are either ignored or slow.
* Styling (JS)
Use .css() instead of attr( 'style' ).
Again, setting properties instead of attributes is much faster,
easier and safer. And this way it takes care of cross-browser
issues where applicable, and less prone to error due to dealing
with key-value pairs instead of css strings.
Difference between:
elem.style.foo = 'bar';
and
elem.setAttribute( 'style', 'foo: bar;' );
* Finding (JS)
Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ).
It is CSS!
* Vendor prefixes (CSS)
It is important to always list newer (standards-compliant) versions
*after* the older/prefixed variants.
See also http://css-tricks.com/ordering-css3-properties/
So the following three:
-webkit-gradient (Chrome, Safari 4)
-webkit-linear-gradient (Chrome 10, Safari 5+)
linear-gradient (CSS3 standard)
... must be in that order.
Notes:
- "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8)
Has not been renamed to "opacity" since Firefox 0.9.
- Removed redundant "-moz-opacity"
- Added "filter: alpha(opacity=**);" where missing
- Fixed order of css3 properties (old to new)
- Add standardized css3 versions where missing
(some 'border-radius' groups didn't have the non-prefixed version)
- Spacing
- @embed
- Shorten hex colors where possible (#dddddd -> #ddd)
$ ack '#([0-9a-f])\1{5}' --css
$ ack '#([0-9a-f])\1{2};' --css
Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
|
|
|
color: #999;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-summary,
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report {
|
2012-08-17 19:30:33 +00:00
|
|
|
background-color: #fff;
|
|
|
|
|
border: solid 1px #cccccc;
|
|
|
|
|
padding: 0.5em;
|
|
|
|
|
border-radius: 0.25em 0.25em 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report {
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
border-radius: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-summary-focused,
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report-focused {
|
2012-12-11 00:26:09 +00:00
|
|
|
border-color: #aaa;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-14 16:50:29 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-conflict {
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-17 14:27:33 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-warnings,
|
2013-05-14 17:40:00 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-conflict,
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-nochanges {
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-options {
|
2012-08-17 19:30:33 +00:00
|
|
|
position: relative;
|
|
|
|
|
background-color: #f7f7f7;
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
border: solid 1px #cccccc;
|
2012-12-11 00:26:09 +00:00
|
|
|
border-top: none;
|
2012-08-17 19:30:33 +00:00
|
|
|
border-radius: 0 0 0.25em 0.25em;
|
2012-12-06 05:57:53 +00:00
|
|
|
min-height: 2.25em;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
|
2012-08-17 19:30:33 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-body label {
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
line-height: 3em;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
|
Kranitor #3: jQuerlyfornication ft. The Cascaders
* Classicifation (JS)
Use addClass instead of attr( 'class' ) whenever possible.
addClass will manipulate the properties directly instead of
(re-)setting an attribute which (most) browsers then sync
with the properties.
Difference between:
elem.className
and
elem.setAttribute( 'class', .. );
Just like .checked, .value, .disabled and other interactive
properties, the HTML attributes should only be used for initial
values from the html document. When in javascript, only set
properties. Attributes are either ignored or slow.
* Styling (JS)
Use .css() instead of attr( 'style' ).
Again, setting properties instead of attributes is much faster,
easier and safer. And this way it takes care of cross-browser
issues where applicable, and less prone to error due to dealing
with key-value pairs instead of css strings.
Difference between:
elem.style.foo = 'bar';
and
elem.setAttribute( 'style', 'foo: bar;' );
* Finding (JS)
Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ).
It is CSS!
* Vendor prefixes (CSS)
It is important to always list newer (standards-compliant) versions
*after* the older/prefixed variants.
See also http://css-tricks.com/ordering-css3-properties/
So the following three:
-webkit-gradient (Chrome, Safari 4)
-webkit-linear-gradient (Chrome 10, Safari 5+)
linear-gradient (CSS3 standard)
... must be in that order.
Notes:
- "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8)
Has not been renamed to "opacity" since Firefox 0.9.
- Removed redundant "-moz-opacity"
- Added "filter: alpha(opacity=**);" where missing
- Fixed order of css3 properties (old to new)
- Add standardized css3 versions where missing
(some 'border-radius' groups didn't have the non-prefixed version)
- Spacing
- @embed
- Shorten hex colors where possible (#dddddd -> #ddd)
$ ack '#([0-9a-f])\1{5}' --css
$ ack '#([0-9a-f])\1{2};' --css
Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog input[type="checkbox"] {
|
2012-08-17 19:30:33 +00:00
|
|
|
margin: 0 0.5em 0 1em;
|
|
|
|
|
line-height: 3em;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
2012-08-17 19:30:33 +00:00
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-editSummaryCount {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
border-left: solid 1px #eee;
|
|
|
|
|
line-height: 3em;
|
|
|
|
|
padding: 0 1em;
|
|
|
|
|
color: #aaa;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-editSummary,
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-problem {
|
2012-08-17 19:30:33 +00:00
|
|
|
border: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
resize: none;
|
2012-08-17 22:43:49 +00:00
|
|
|
font-size: 0.8em;
|
|
|
|
|
font-family: sans-serif;
|
2012-12-11 23:19:21 +00:00
|
|
|
height: 5em;
|
2012-08-17 19:30:33 +00:00
|
|
|
}
|
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-editSummary:focus,
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-problem:focus {
|
2012-08-17 19:30:33 +00:00
|
|
|
outline: none;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
2012-12-11 00:26:09 +00:00
|
|
|
|
Show "edit source" section edit links in addition to VE ones
Objective:
* Provide quick access to section edit links for both source and visual
editing
Story:
After using this prototype of my mockup, I realized how bad my mockup
was. Hooray for prototyping!
The issues were twofold:
1. Adding down-arrows to the edit links made the page look worse, and
was sure to incite rage and panic throughout the community.
2. The menu was just too heavy. Matmarex made an observation early on
after seeing it, that it wasn't very "Vector", and while I agreed, at
the time I didn't have any better ideas.
Thank you to Matma Rex for prototyping this feature. Aparently there was
also a previous attempt (I13bbb9549). We appreciate your help.
The new design is simple.
* Section edit links look normal
* On hover or focus, the edit source link also appears next to it
To make the two links look separate, we needed a divider. To make the
divider look good we needed to add space around it. To balance the
space, we needed to add space to the brackets. To avoid changing the
view, we needed to only add space to the brackets on hover. To avoid
the text moving around, we needed to make the brackets move away from
the text, rather than the text move away from the brackets. To make
this change smooth, we needed to use transitions. To make the links not
force the heading to wrap in one state but not the other, we needed to
reserve the space, using visibility rather than display. To reserve the
space we had to use closing brackets as spacers, hiding/showing one of
them on mouse enter/leave and leaving the other always hidden. To avoid
the right bracket from getting clipped by the edge of the screen when in
expanded mode, we needed to add a bit of padding to the right side of the
section edit link top level span. To prevent the extra links from
flashing as you move your mouse down the page, we needed to wait 100ms
before showing or hiding them due to mouse enter/leave.
We use negative margins to move the brackets. Animation implemented
using CSS transitions. We bring the pipe divider in from the core
'pipe-separator' message.
To style the brackets independently we needed to wrap them in spans and
add classes to them. Change Id27555c6 in core will make the wrapping
unnecessary, but the two should still get along just fine.
Interestingly, we needed to @noflip the bracket styles because CSS
Janus flipping is triggered on UI language, but the brackets need to be
styled according to the content language.
Changes:
ve.init.mw.ViewPageTarget.css
* Add styles for extra section edit link components
ve.init.mw.ViewPageTarget.js
* Add edit source link, and make it visible when the mouse is over the
heading or either section edit link is focused
*.php
* Links to new messages
Bug: 48429
Change-Id: I4b9c47fd65a700a81c880144247fec524edff7e5
2013-06-25 20:24:43 +00:00
|
|
|
/* Section edit links */
|
|
|
|
|
|
|
|
|
|
.mw-editsection {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
padding-right: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mw-editsection-divider {
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mw-editsection-bracket {
|
|
|
|
|
-webkit-transition: color 100ms ease-out, margin 100ms ease-out;
|
|
|
|
|
-moz-transition: color 100ms ease-out, margin 100ms ease-out;
|
|
|
|
|
-ms-transition: color 100ms ease-out, margin 100ms ease-out;
|
|
|
|
|
-o-transition: color 100ms ease-out, margin 100ms ease-out;
|
|
|
|
|
transition: color 100ms ease-out, margin 100ms ease-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* @noflip */
|
|
|
|
|
.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:first-of-type,
|
|
|
|
|
.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) {
|
|
|
|
|
margin-left: -0.25em;
|
|
|
|
|
margin-right: 0.25em;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* @noflip */
|
|
|
|
|
.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:first-of-type,
|
|
|
|
|
.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) {
|
|
|
|
|
margin-right: -0.25em;
|
|
|
|
|
margin-left: 0.25em;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
/* Images */
|
|
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-loading,
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-working {
|
|
|
|
|
/* @embed */
|
|
|
|
|
background-image: url(images/loading.gif);
|
|
|
|
|
}
|