Commit graph

115 commits

Author SHA1 Message Date
Trevor Parscal 1572ec1569 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-14 00:03:31 +00:00
Rob Moen 7044ec820f More work on dialog classes and their mw specific handling.
Changes include:

VisualEditor.i18n.php, VisualEditor.php
* i18n labels for dialogs

ve.init.mw.ViewPageTarget.js
* Initial go at onOpenDialog and onCloseDialog methods

ve.init.Target.js
* Change calls to dialog hide & show to close & open

ve.ui.MetaDialog.js, ve.ui.ContentDialog.js
* Pass surface when constructing
* Add static title message property

ve.ui.Surface.css
* Set high z-index for toolbar for shadow to overlap dialog.

ve.ui.Dialog.js
* Extends EventEmitter class.
* Changed hide/show method names to open/close.
* Create base ui elements.

ve.Surface.js
* Create instance of meta dialog.

Change-Id: I867ca0546606eeb5e2ab7f612bb5af700ab877ec
2013-03-07 12:47:42 -08:00
Trevor Parscal a5aeca3ff5 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-26 12:29:08 -08:00
Trevor Parscal 59c67e1e94 Modify styles, add disabled and read-only for widgets
demos/ve/demo.css, demos/ve/index.php
* Style changes for utilities and dump output
* Initially disable the log range button, activate when there's a range to log
* Make range inputs read-only
* Rename some widget variables
* Add extra structure and classes to dump output

ve.ui.Widget.css
* Remove left/right margin for buttons
* Simplify opaque white color
* Modify selector for disabled buttons - see changes in ve.ui.Widget.js
* Added styles for text input widget's readonly and disabled states

ve.ui.Widget.js
* Added disabled state

ve.ui.ButtonWidget.js
* Moved click event handler to method

ve.ui.InputLabelWidget.js
* Moved click event handler to method

ve.ui.InputWidget.js
* Moved input change event handler to method
* Added readOnly state

ve.ui.LinkTargetInputWidget.js
* Corrected documentation

ve.ui.MenuWidget.js
* Blocked interaction while widget is disabled

ve.ui.MWLinkTargetInputWidget.js
* Corrected documentation
* Blocked interaction while widget is disabled

ve.ui.TextInputMenuWidget.js
* Blocked interaction while widget is disabled

Change-Id: I7ea89873b50a98d058d1dd1e309e3e8b7c8e7b2e
2013-02-25 12:10:26 -08:00
James D. Forrester 82114467f1 Bump copyright notice year range to -2013 over -2012
199 files touched. Whee!

Change-Id: Id82ce4a32f833406db4a1cc585674f2bdb39ba0d
2013-02-19 15:37:34 -08:00
Trevor Parscal d0ff691f9e Add user interface widgets
* New! Button and InputLabel widgets
* Using new buttons in the demo
* Moved styles around to generalize input styles

Change-Id: Ic42e133f8fe0fffcb61374c09dd5668db82a4799
TODO: Use these buttons other places! (like ve.init)
2013-02-13 18:04:04 -08:00
Trevor Parscal d42a52bb59 Added new icons
Icons needed for upcoming generated content editor.

* Parameter (big and small)
* Parameter Set
* Source (big and small)
* Template (big and small)

Change-Id: I9c5df7970e3f0991ac6a66590212f40d83af9c0a
2013-02-13 16:06:29 -08:00
Trevor Parscal f49d80d27a i18n icons
Graphics (*.ai, *.png, *.svg)
* Took a pass on all images making them sharper and clearer
* Renamed bold and italic to bold-b and bold-a
* Added bold-f, italic-k, bold-a and italic-a
* Reorganized illustrator file

ve.ui.Icons-raster.css, ve.ui.Icons-vector.css
* Added classes for new icons
* Appended bullet, number, indent and outdent class names with "list"

ve.ui.*ButtonTool.js
* Added definitions for static icon property
* For bold and italic, added i18n style definitions

ve.ui.ButtonTool.js
* Switched from re-using the name property (which is intended to be the symbolic name of the tool used when registering with the tool factory) to using an static icon property for defining the icon

Change-Id: I43e7c35835a1e6dfb06f2a70226fac0d395008e8
2013-02-01 15:29:18 -08:00
Trevor Parscal bf5ba1ea2b Fixed documentation errors
Many of these problems were introduced in I859b5871a9d2f17d970c002067c8ff24f3513e9f

Change-Id: Ifc2dc4934f782c4ce5107e3a356e357aef754083
2013-01-22 23:38:01 +00:00
Trevor Parscal 8d33a3de0d Major Documentation Cleanup
* Made method descriptions imperative: "Do this" rather than "Does this"
* Changed use of "this object" to "the object" in method documentation
* Added missing documentation
* Fixed incorrect documentation
* Fixed incorrect debug method names (as in those VeDmClassName tags we add to functions so they make sense when dumped into in the console)
* Normalized use of package names throughout
* Normalized class descriptions
* Removed incorrect @abstract tags
* Added missing @method tags
* Lots of other minor cleanup

Change-Id: I4ea66a2dd107613e2ea3a5f56ff54d675d72957e
2013-01-16 15:37:59 -08:00
Trevor Parscal f31dc45da8 (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-15 15:05:11 -08:00
Timo Tijhof b11bbed7a6 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-05 01:16:32 +01:00
Trevor Parscal 99ccfab9f0 (bug 42920) Add the feedback tool
icons, comment.*, ve.ui.Icons-*
* Added comment icon

ve.init.mw.ViewPageTarget
* Refactored editNoticeButton into being just a tool
* Added feedback tool, which shares the editNoticeButton code
* Added feedback object construction in init constructor
* Added launching code to feedback tool

VisualEditor.i18n
* Renamed editnotices-button message to editnotices-tool to match changes in code
* Added feedback tool message

VisualEditor
* Added dependency on mediawiki.feedback
* Updated changed message key
* Added reference to new message

Change-Id: I813c89a505386a9b3206bfbcb176016e28a592cb
2012-12-10 18:47:53 -08:00
Trevor Parscal c051107b39 Removed all browser-specific box-shadow rules
These aren't needed for any of our target browsers anymore.

Change-Id: Idae4acb5f0f6387cad52f2ea7594dbad1929af59
2012-12-03 23:08:33 +01:00
Krinkle 3b3dab11c7 Merge "Removed all browser-specific border-radius rules" 2012-12-03 22:05:59 +00:00
Trevor Parscal 5812c8babe Removed all browser-specific border-radius rules
These aren't needed for any of our target browsers anymore.

Change-Id: I86d1964f163827673c090b67a472254b73e365a4
2012-12-03 23:05:30 +01:00
Krinkle 46e52ae7bc Merge "(bug 42220) Added support for edit notices, which appear on the toolbar" 2012-12-03 22:02:16 +00:00
Trevor Parscal a63f812d52 (bug 42220) Added support for edit notices, which appear on the toolbar
ApiVisualEditor
* Including notices in response to parse actions

ve.init.mw.ViewPageTarget
* Added styles for editNoticeButton and editNotices

ve.init.mw.ViewPageTarget
* Added toolbarEditNoticeButton and toolbarEditNotices
* Combined toolbarEditNoticeButton and toolbarSaveButton setup
* Moved toolbar buttons setup to onLoad (it could vary per-parse now)
* Added tearDownToolbarButtons which fires on deactivate
* Renamed some instances of teardown to tearDown
* Added click handler for toolbarEditNoticeButton
* Added toolbarEditNotices setup method, called on load
* Made notices fade in and out, in by default on load if any
* Made notices hide when save dialog is opened

ve.init.mw.Target
* Added storing of notices on parse

icons, alert, ve.ui-Icons
* Added alert icon

VisualEditor.i18n, VisualEditor
* Added notices button message

Change-Id: I581bf5a005a9c18422f952d71064d17d0ba9b540
2012-12-03 11:49:33 -08:00
Rob Moen bad4de89b6 Add hover state to link inspector suggestion items.
Addresses (Bug 39977)

Change-Id: I159f86b070544f829ff801ac3ab913d36c5a0b30
2012-11-30 14:52:57 -08:00
Rob Moen 766b5f3d3c Restyle suggestion dropdown into a single column.
* Permits longer page titles in suggestions without changing
  the width of the  dropdown.
* Addresses (Bug 40675)

Change-Id: Ie76a551970a040074b86c49bb44bda640ecd4845
2012-11-30 11:08:49 -08:00
Trevor Parscal d2476a26d2 The great inspector and context rewrite of 2012
ve.AnnotationAction
* Added filter to the clearAll method to allow clearing all matching annotations only

ve.dm.Document
* Some variable renaming for consistency

ve.dm.SurfaceFragment
* Added truncateRange method
* Added annotation scope to expandRange method
* Added support for passing an annotation object into annotateContent method
* Switched to using name instead of type in annotateContent method to match the ve.dm.Annotation class
* Fixed logic in annotation mode of expandSelection so that expansion only takes place if the annotation is found

ve.ui.LinkInspector
* Moved most of the functionality elsewhere
* General reorganization
* Changed setOverlayPosition to accept 2 arguments instead of an object with 2 properties and renamed it to positionOverlayBelow
* Check for annotation object before extracting target information from it
* Initialize default target as empty string to avoid undefined being cast to a string and the default target becoming 'undefined'

icons.ai, inspector.png, inspector.svg
* Added generic inspector icon which will be used when a custom icon is not specified in future inspector subclasses

ve.ui.Inspector.Icons
* Added inspector icon
* Renamed clear icon to remove to match it's actual image

ve.ui.Context
* Greatly simplified the interface, reducing the number of methods by inlining a few things and combining others
* Now always listening to resize events on the window rather than only while document is focused
* Not listening to scroll events anymore, they used to affect the top/bottom positioning of the menu which we don't do anymore
* Lots of cleanup and reorganization
* No need to fallback to empty array since getInspectorsForAnnotations does so already
* Only consider fully-covered annotations for inspectors

ve.ui.Frame
* Simplified the constructor by introducing the createFrame method
* General cleanup
* Typo fixes

ve.ui.Inspector
* Generalized lots of functionality previously located in the link inspector class which will be useful to all inspectors (such as title, clear button, saving changes, etc.)
* Added setDisabled and isDisabled methods to manage CSS changes and avoid needing to check the CSS to determine the state of the inspector (storing state in the view is evil)
* Added getMatchingAnnotations method for convenience
* Added prepareSelection stub
* Lots of cleanup and documentation
* Type pattern is now defined in base class
* Added stubs for onOpen and onClose with documentation so that subclass authors know what these methods do
* Removed checks for onOpen or onClose methods since they are now noop stubs and are always there
* Added stub and removed checks for onRemove
* Made esc key close and accept - the illusion is supposed to be that the link changes are applied instantly, even though they are only updated when you close, so all closing except for when removing should apply changes - i.e. esc is now equal to back rather than being a special function that doesn't have an associated affordance
* Only consider fully-covered annotations when getting matching annotations

ve.ui.InspectorFactory
* Depending on type pattern now since it's always there
* Added getInspectorsForAnnotations method
* Return empty array if annotation set is empty

VisualEditor, VisualEditor.i18n
* Added default inspector message

Change-Id: I1cc008445bcbc8cba6754ca4b6ac0397575980d5
2012-11-19 15:21:27 -08:00
Trevor Parscal cab7f84b55 Fixed line-height variations between sa and mw integrations
* Also fixed format drop-down's preformatted label styling

Change-Id: I983ff71959f5e78e52fbe4c585db20357b7ca2d5
2012-11-06 10:24:58 -08:00
Trevor Parscal 238feeb881 Tools changes
* Rewrite of all tools, dramatically simplifiying them and decreasing
  duplication
* Tools are now created using a tool factory instead of
  a make-shift facility built into the toolbar
* All UI object have a surface or a toolbar reference instead of a
  surface view

Change-Id: I589ecba36bf715b452d03c8fd5c0547dc3c1dc61
2012-10-26 14:48:27 -07:00
Rob Moen 9563f0880d UI context reorganization, inspector rewrite, iframe refactor, icon generalization
* Only show the inspector if the selected text has an inspectable annotation
* Replace the inline menu with a toolbar containing inspectable annotations
* Change the appearance of the inspector to match new mockups
* Add the trash can icon for removing annotations
* Move iframe handling code into a class that manages all that nonsense

Change-Id: I840f72426f9a9e50054a28de950393f0e9913153
2012-10-26 14:46:11 -07:00
Robmoen ff6d0b4a31 Merge "Made save dialog float with toolbar" 2012-09-28 21:04:30 +00:00
Trevor Parscal bfeb0455d9 Added callout icon
Change-Id: I1641c91a2729ada40ccada6b85e9f0e46e1d0c21
2012-09-28 14:00:46 -07:00
Trevor Parscal 57599e1c95 Made save dialog float with toolbar
Change-Id: I6c66c3817669adcee6314c16fcf49ef1a8db7b65
2012-09-28 13:44:51 -07:00
Trevor Parscal 4c9b1d6035 Icon improvements
* Added some new icons (to be used soon in the inspector redesign)
* Added right-to-left icons for lists
* Renamed some icons for future RTL use

Change-Id: I10e3e3fcda82786e3064176e7eefe211b88db95c
2012-09-26 14:53:11 -07:00
Krinkle db2c44ef2d Merge "Added CSS rules back in to put the menu above/below" 2012-09-24 01:56:26 +00:00
Rob Moen ff1fc7ef08 Use inspector specific icon css files vs entire icon set css.
Change-Id: I9c519abc478ac22976a8d86aac461d90c92c8a57
2012-09-19 17:16:05 -07:00
Trevor Parscal 71f91dd92c Added CSS rules back in to put the menu above/below
Change-Id: I34d9031c04bed4944d2b3cd184fed021fc31d4a9
2012-09-19 12:37:06 -07:00
Rob Moen df4391bc69 (bug 38548) Switch undo / redo buttons for RTL.
Rename the graphic files to more generic names to make them
flippable by CSSJanus.

Change-Id: Ide2540f2f281367909f7f2c7943c9106c0b36699
2012-09-16 08:39:18 -07:00
Rob Moen 3331b16b3f Plug new vector icons / styles into inspector iframe.
Change-Id: Ibd5227de6b74c51f31093e64a4404d5830e84a4e
2012-09-05 17:15:20 -07:00
Rob Moen 67749504d2 Center Ellpisis for long page titles. Misc positioning fixes.
MultiSuggest:
Added CSS Ellipsis config option which provides CSS to suggestion items.

LinkInspector:
-Configured multiSuggest for page suggestions with CSS ellipsis off and removed CSS definitions.
Instead, using jquery.autoEllpisis plugin for centered position ellipsis. (Bug 39591)
-Temporary tweak to link input padding to prevent text from overlapping down arrow.
Down arrow soon to be implemented differently.

RTL Fixes:
-MultiSuggest overlay positions correctly by setting a width.
-MultiSuggest background image position fix.

Change-Id: I806ead5a2c2621589f76cfb2b03805cbd0b0a18a
2012-09-05 13:21:29 -07:00
Trevor Parscal b370bbd0bc Improved icons
* Moved icons into Illustrator (used to be in Photoshop)
* Added SVG icons too
* Added support for devices with pixel ratio > 1 (they use SVG)
* Cleaned up icons (little rendering errors here and there)
* Organized icons into their own folder
* Increased the horizontal margin of the down arrows in the formatting (in the toolbar) and location (in the link inspector) drop down menus

Change-Id: I29b7084c9b1145051b2a76f514cfca9826d53ddb
2012-08-31 13:23:04 -07:00
Trevor Parscal a52d7ff65a Finally getting rid of all the es-* stuff and other cruft
* Switched a lot of classes from es-* to ve-ui-*
* Removed all the DOM structure left over from the old sandbox demo
* Got rid of transparent backgrounds
* Added menu font-size rule to stand-alone target
* Moved some rules around that were in the wrong places
* Got rid of some unused/unneeded methods in the mw target (attach and detach surface methods)
* Added active class to context icon with shallower shadow effect so it doesn't break your spacial perception when you click on it
* Renamed the iframe and iframe wrapper elements so it's easier to see where they came from
* Removed unused CSS rules
* Fixed some uses of prop( 'class', … ) to addClass

Change-Id: I54a660ca0baf0baa4463faca7a1edcf648130b6b
2012-08-28 13:59:35 -07:00
Trevor Parscal a8166fe5a4 A bit of cleanup in the inspector and suggestion code
* function() -> function ()
* ){ -> ) {
* Quoted JSON keys (Look the other way Timo!)
* Using more descriptive group names, which also avoid using "new" as a key
* Line breaks at 100 columns using 4 spaces/tab
* Not setting classes on suggestion items that have no effect (such as 'external' on a div - even on an <a> tag this isn't enough to get the style because it's not inside #content)

Change-Id: I37032fa8ba93adb7b719d9797f9b1b806359cc13
2012-08-27 16:39:08 -07:00
Trevor Parscal c6b1011931 Cleaned up some CSS in ve.ui.Surface.css
Got rid of some commented out code we aren't going to use and fixed the order of arguments to background position to x, y

Change-Id: I4e638c33b053dd916681dc91c8c0d7cff224375d
2012-08-23 11:02:31 -07:00
Catrope 487a64c3f0 Merge "Floating toolbar fixes" 2012-08-22 18:07:23 +00:00
Trevor Parscal 43e8403273 Merge "Context module cleanup." 2012-08-22 17:42:53 +00:00
Rob Moen 8e5b7fc5ce Context module cleanup.
-Changed es class prefixes to ve.

-Organized Context & Inspector construction.

-Updated comments & Whitespace.

Change-Id: I4a387621e5147e72d3869ff46eef4790091442c0
2012-08-22 10:42:15 -07:00
Trevor Parscal ceb8ac9918 Floating toolbar fixes
* Added more support for making dynamic skin changes in vector (based on media queries) get applied to the toolbar while it's floating
** Added animation for toolbar wrapper margins
** Added resize handler to update left and right positions on the toolbar when it's floated
 * Changed from using generic "float" and "bottom" class names which are likely going to get re-used elsewhere and cause issues

Change-Id: Ic596b2b8aceb8a2d81539e197ef4d6e17326a87a
2012-08-20 15:43:47 -07:00
Trevor Parscal 7576c0fa5f Some basic link inspector style changes
Some of the HTML structure in the suggestions might need to be changed to pull off pixel-perfect reproduction of the original design, but this gets us very close.

Change-Id: Ie574577af4815e4f0fc9f8a03e57759dd9dfff84
2012-08-20 12:32:42 -07:00
Reedy 7c46bf77b8 Losslessly compress png images
Change-Id: Ie0b52dcb75157a35468a1cf208f85a5adc5fc98e
2012-08-18 23:12:44 +01:00
Rob Moen 58558b26fd VE multiSuggest bug fixes.
-Using keydown on arrows allows preventDefault which stops the cursor movement in the input.

-Consolidated Keydown bindings, no longer unbinding keydown, instead checking for visible state first.

-Using case insensitive comparison for selected item.

-Changed use of ve.inArray to ve.indexOf because method name was changed.

-Moved clear break into suggestion container rather than after it.
Added margin bottom on suggestion container for category separation.

Change-Id: I2bd1db049a948db189194037dc8e38dfe884c197
2012-08-17 15:13:19 -07:00
Trevor Parscal d5ce342268 Merge "Added MW page suggestion functionality." 2012-08-17 21:13:18 +00:00
Rob Moen dda2c932bd Added MW page suggestion functionality.
Created jQuery plugin MultiSuggest which builds a categorized dropdown
under specified input box.

Revised inspector to no longer be an iframe but to contain an Iframe.
This reduces xbrowser issues with positioning and toggling inspector
container.

Added Inspector overlay element for positioning arbitrary elements
over the iFrame.  This prevents growing the iframe to arbitrary lenghts.

Change-Id: I8efbbd091b0b24a19a4b73aa122d21a329cf97e4
2012-08-17 14:12:26 -07:00
Trevor Parscal f48332d176 Design changes for save dialog
* Summary label is now placeholder text
* Edit summary and options are visually connected
* Added summary length count-down label
* Removed check-mark icons from toolbar and dialog save buttons
* Made toolbar and dialog save buttons the same size
* Reduced line-height and margins of license information
* Changed from X icon for close (which might be confused with cancel) to ^ icon for collapse

Change-Id: Ib1711f49af8929be12796aecdea49467b726856e
2012-08-17 13:48:16 -07:00
Timo Tijhof 077e21867e 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 13:05:57 -07:00
Rob Moen 277e0f8b86 Fix position of context icons.
-Added RL embed for images

Change-Id: Id92e3cfe31376e18a924acc983ab17a2bcca837a
2012-07-25 14:41:25 -07:00
Trevor Parscal a05381dce7 Merge "Inspector box shadow was a bit too dramatic, adjusted styles." 2012-07-25 19:50:29 +00:00
Rob Moen 99ff0d5f6c Inspector box shadow was a bit too dramatic, adjusted styles.
Change-Id: Ie0f066f62b363df645c072ee174000991258574e
2012-07-25 12:47:04 -07:00
Rob Moen 3c9a4e7027 Restore arrow-down to original size because it is needed in context menu.
Add element for arrow icon in dropdown tool and new css rules which
support RTL.

Change-Id: I4193f9cac7af7b84cf8400e9bdcbcb4967b57932
2012-07-25 12:18:51 -07:00
Catrope f3f7715553 Merge "(bug 38545) Fix RTL position of the drop-down arrow" 2012-07-24 02:32:43 +00:00
Amir E. Aharoni fd0af6541b (bug 38545) Fix RTL position of the drop-down arrow
In RTL interface the drop-down arrow overlaps with the text.

The arrow was positioned explicitly in relation to the left margin, and this
can't work in a flipped RTL environment. I changed the position to "right"
and modified the arrow image a bit.

Some visual tweaks to the arrow may still be needed. Another option can be
to convert the image to SVG or to use a character like ▼.

Change-Id: Ib09a2a20b150de6e8a9531fc0db7dfffe4e95525
2012-07-23 19:27:53 -07:00
Rob Moen 0195b04f26 Bug 33163 - VisualEditor: Floating toolbar should not be displayed when the edit area is entirely off-screen
- Added limits to toolbar float, Toolbar will not go past the last node in editor.
- Added bottom mode to allow toolbar to stick above the last node until the scroll position
is above the last node.
- Actually checking toolbar config now and setting float when flag is set.
- Gave float method for top toolbar a better name.

Change-Id: Ic39c5402fa7a05e13c5e81722d8729d93776d7e9
2012-07-20 15:28:44 -07:00
Rob Moen 5e27d6a7a2 Revised inspector iframe construction to allow multiple inspectors
to be added.  Create inspector elements in the propper document
scope.  Restore inspector css classnames to camel case for proof
that inspectors are being created in the correct document scope.
Previously, inspector elements created in the wrong document scope
would have css rules applied only if class names were lowercase.
Issue only surfaced in Webkit browsers.  Though, this implementation
is more future proof and will help prevent future inspector bugs.
Patch 3) Fixed global variable definition and mistake with
inspectorDoc

Change-Id: I36c0d078aea10d919689768878004a19f7f89b55
2012-07-19 17:29:15 -07:00
Trevor Parscal 6b34f09df2 Removed some whitespace
And added a license to some files that didn't have it yet

Change-Id: I3a7e60374d1198d369a0475b8f65f7415012a337
2012-07-19 14:25:16 -07:00
Trevor Parscal c40174b60c Changed to use MIT license per agreement with the VisualEditor team
This license change is aimed at maximizing the reusability of this code
in other projects. VisualEditor is more than just an awesome editor for
MediaWiki, it's the new editor for the entire internet.

Added license and author files, plus mentions of the license to all
VisualEditor PHP, JavaScript and CSS files. Parser files have not been
modified but are effectively re-licensed since there's no overriding
license information. 3rd party libraries are not changed, but are all
already MIT licensed.

Change-Id: I895b256325db7c8689756edab34523de4418b0f2
2012-07-19 13:25:45 -07:00
Catrope c3da174e8c Merge "Removed Special:VisualEditorSandbox and refactored demo" 2012-07-19 00:58:43 +00:00
Trevor Parscal 9a0380c67d Removed Special:VisualEditorSandbox and refactored demo
Also renamed ext.visualEditor.editPageInit to
ext.visualEditor.viewPageTarget

Change-Id: I8bdd04b3442067e87bccbc60dd4947aae1c7dfd2
2012-07-18 17:57:50 -07:00
Rob Moen b345915d0f Fix link inspector css in new version of chrome.
Chrome engine modifies CSS names to lowercase when inside iframe...

Change-Id: I9cd8ccba011d82549ad71acd2b18c6241ec47ca4
2012-07-06 14:50:19 -07:00
Catrope 6afed5e5cc Move ve2/ back to ve/
Change-Id: Ie51d8e48171fb1f84045d1560ee603cee62b91f6
2012-06-19 18:20:28 -07:00
Sam Reed fc49422e1d More image compression of extensions with WMF interest 2012-02-29 22:02:03 +00:00
Trevor Parscal 6dcc39fe11 Migrated es.* to new ve.* namespace which is more structured, and will make it easier to keep data model, edit surface, user interface and content editable work separated cleanly 2012-02-06 23:50:56 +00:00