Commit graph

15 commits

Author SHA1 Message Date
Trevor Parscal 8f3e6f152f Dialog button changes
ve.ui.MetaDialog.js
* Added scrolling to outline panel

ve.ui.css
* Added reusable animation keyframes

ve.ui.Dialog.css
* Changed dialog head style
* Changed dialog cancel button to close icon button
* Added animation of dialog opening
* Increased min-height of dialog to always show a little content

ve.ui.Icons-*.css
* Added close icon (not sure why it was missing)

ve.ui.Window.css
* Moved head padding out of window and into implementations of window

ve.ui.Dialog.js
* Moved apply button to footer
* Renamed cancel button to close button
* Overrode close method with triggers a closing animation and then calls the parent close method after an animation is complete
* Added classes to close and apply buttons to make styling less ambiguous
* Converted cancel button (now the close button) to an icon button

ve.ui.Window.js
* Added footer to dialog

VisualEditor*.php
* Added close message

Change-Id: Iededbc54b287328b3047b05efad6ca3cc152caa5
2013-04-10 12:34:52 -07:00
Trevor Parscal 7ac32bc0f6 No more confusing boolean argument for closing windows
window.close( true ) thing sucked, and was being named and used
inconsistently throughout the code.

The new approach uses an action string, so it looks more like
window.close( 'accept' ) or window.close( 'back' ). This makes it easy
to steer the behavior at any point in the window close code path.

Most importantly for the link inspector, this allows us to now restore
the previous selection when the user presses escape or clicks the back
button, while still moving the cursor to the end and collapsing the
selection upon pressing enter and allowing removal by clicking the
trash can.

This commit also cleans some things up, like the various ways we have
to close an inspector which all seem useless because we wouldn't want
to just randomly close an inspector on someone. An inspector should
be closed only when the user has dealt with it.

ve.InspectorAction.js
* Removed close method

ve.ui.LinkInspector.js
* Updated documentation
* Passing action to parent method
* Updated logic to deal with change from "remove" to "action" argument
* Added selection restauration on "back" action

ve.ui.Context.js
* Added action to call to close
* Removed closeInspector method

ve.ui.Dialog.js
* Moved event handlers to the top
* Added actions to calls to close
* Added click block event handler to prevent focus changes

ve.ui.Inspector.js
* Added actions to calls to close
* Added storing of previous selection - this is different from
  initialSelection because it's captured before the selection is
  modified by setup

ve.ui.Window.js
* Updated documentation
* Updated argument name from "remove" to "action"

ve.ui.WindowSet.js
* Updated documentation
* Removed auto-close, replaced it with error if trying to open a window
  when another is already open
* Removed close method

Change-Id: Ie8f72504177dd6ba169fdddbb776fd5397b831c4
2013-04-10 12:31:49 -07:00
Rob Moen 1db76c392f Fix 404 on iframe styles by standardizing get and set modules methods.
Change-Id: Iebc2a9fc7db00d661f685c28dbc345fb561bb15e
2013-04-10 10:18:39 -07:00
Trevor Parscal f7335d4729 Support loading stylesheets into frames from different locations
This is one of the blockers for splitting VE up into separate
repositories or extending VE with an extension.

ve.ui.Frame.js

  It's critical that we don't emit initialize from ve.ui.Frame until
  it's completely loaded, especially its styles, because we will
  begin measuring it straight away.

  Involved loading the stylesheets using $.ajax and setting base
  URL of the iframe to the ve.ui styles directory so all the image
  URLs still worked. This won't work for stylesheets from multiple
  locations, so we needed a more robust solution.

  The new solution uses some trickery described in the code
  documentation, but essentially no longer depends on all
  stylesheets being located in the same folder.

ve.ui.Dialog.js, ve.ui.Inspector.js, ve.ui.Window.js

  Static methods are now being used to extend a window class to
  include different stylesheets rather than simple array
  concatenation.

Change-Id: I619238732f975d41305f81f8f818a577a40f49da
2013-04-08 13:58:50 -07:00
Trevor Parscal 148b6bf8a8 Media dialog support
*/index.php
* Added links to new files

VisualEditor.php
* Added links to new files
* Removed keys of non-existent messages

ve.ui.ContentDialog.js, ve.ui.MetaDialog.js
* Removed redundant comments

ve.ui.MediaDialog.js
* New dialog, just for media

icons.ai, picture.png, picture.svg, ve.ui.Icons-*.css
* Added picture icon

ve.ui.MediaButtonTool.js
* New button, just for media (shows up in the context toolbar)

ve.ui.DialogButtonTool.js
* New base class for dialog buttons

ve.ui.Context.js
* Added basic support for showing dialog buttons, in addition to
  annotation buttons, in the context toolbar - to test, select only an
  image node

ve.ui.Dialog.js
* Prevent clicks on the click-block from changing focus
* Moved initialize to below the event handlers and updated its
  documentation

ve.ui.DialogFactory.js
* Added a way to get the names of dialogs that can be used to edit a
  node

ve.ui.Inspector.js
* Removed close handler which set focus, this is done already in window

ve.ui.InspectorFactory.js
* Fixed comment so it's not telling lies anymore

ve.ui.Window.js
* Removed auto-focus on frame, it's changing the focus in the parent
  document which blows-away the focus in CE, and it really isn't needed
  as it turns out

VisualEditor.18n.php
* Added media dialog title message
* Added media tool tooltip message

Bug: 37870
Change-Id: I9150c46b3e292910fed899fa60d6da433049ca45
2013-04-05 11:52:57 -07:00
jenkins-bot 85f6177543 Merge "Add overlay to frame" 2013-04-02 19:22:26 +00:00
jenkins-bot 2f0c091bf2 Merge "Stack panel, element mixins, cleanup" 2013-04-02 19:22:08 +00:00
Trevor Parscal 8e273b7d9f Add overlay to frame
This is where we can add popups and stuff.

Accessible through: this.$$.frame.$overlay

Change-Id: Icbc9a114006804a1b9ab74144f0aaf59a15c5466
2013-04-02 12:10:31 -07:00
Timo Tijhof c53685b865 Doc: Replace "@property @type {Type}" with "@property {Type}".
Also removed a few redundant headings in class documentation
comments. There is already an @class and it looks a bit odd  in
the generated pages:
 <h2>TextString</h2>
 <p>TextString</p>
 <p>This class provides a ...</p>

Change-Id: Ie311c6993ed02e79272dbde71f6a1bc252ef3037
2013-03-28 21:21:56 +01:00
Trevor Parscal a2e59f7c86 Stack panel, element mixins, cleanup
*.php
* Updated links to files

ve.ui.MetaDialog
* Added stack panel that now contains category and language editor panels
* Attached outline widget to stack panel

ve.ui.FlaggableWidget -> ve.ui.FlaggableElement
* Moved to elements

ve.ui.GroupWidget -> ve.ui.GroupElement
* Moved to elements
* Removed invalid event documentation

ve.ui.LabledWidget -> ve.ui.LabledElement
* Moved to elements

ve.ui.StackPanelLayout.js
* New class, mutually exclusive panel container

ve.ui.TitledPanelLayout
* Remvoed, using labeled element instead

ve.ui.Element.css
* Added for elements
* Moved label style here, from widget styles

*.css, ve.ui.ButtonWidget.js, ve.ui.InputLabelWidget, ve.ui.OptionWidget, ve.ui.SelectWidget
* Adjusted class names to reflect widget -> element migration

Change-Id: I32f504c844dba7aae1b286eef06ca046627bdc8d
2013-03-28 12:40:01 -07:00
Trevor Parscal fb22e4df50 Group, Select, Option, Outline and MenuSection widgets
Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes.

ve.ui.Dialog.css
* Make dialog a fixed width and have a minimum and maximum height while always being centered in the window.
* Add style for the outline panel
* Add border below the title
* Move font-size adjustment to child elements to preserve layout scale

ve.ui.Inspector.css
* Make inspectors fade in when being opened (will happen after the size transition is complete)
* Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading

ve.ui.Tool.css
* Update classes according to changes in labeled widgets

ve.ui.Widget.css
* Add display: block to widget labels to support use of autoEllipsis on them
* Update classes according to changes in labeled widgets
* Add styles for new select, option and outline item widgets
* Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in)

ve.ui.Window.css.js
* Moved selection disabling rules up to the head to prevent selection drawing around the title

ve.ui.GroupWidget.js
* New widget that manages "items", allowing getting, adding, removing and clearing

ve.ui.MenuSectionItemWidget.js
* New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu

ve.ui.OptionWidget.js
* New widget to be used with select widgets, provides select and highlight functionality

ve.ui.OutlineItemWidget.js
* New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label

ve.ui.OutlineWidget.js
* New widget that provides a vertically stacked list of mutually exclusive options, extends select

ve.ui.SelectWidget.js
* New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally

ve.ui.MetaDialog.js
* Hacked in support for an outline widget in the outline pane
* Added classes for styling purposes

ve.ui.FormatDropDownTool.js
* Modified call to menu item constructor as per changes therein
* Reorganized options config to make construction simpler
* Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item

ve.ui.DropDownTool.js
* Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame
* Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property

ve.ui.Context.js
* Improve context/inspector behavior in regards to initial sizing

ve.ui.js
* Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$

ve.ui.Window.js
* Fixed incorrect case for boolean type in comment
* Added getFrame method

ve.ui.ButtonWidget.js
* Removed extra class being set on label

ve.ui.LabeledWidget.js
* Added class on label
* Added fitLabel method which uses autoEllipsis internally

ve.ui.MenuItemWidget.js
* Moved nearly all of the implementation to option so it could be reused

ve.ui.Menu.js
* Moved most of the implementation to select and group

ve.ui.MWLinkTargetInputWidget
* Prevent aborting and re-querying if the value hasn't actually changed
* Updated populateMenu method as per changes in menu class

*.php
* Added links to new files

Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-20 22:55:32 +00:00
Timo Tijhof 4e64187beb Document and clean up events in all the things
* Document them consistently between secetions Inheritance and
  Static Properties under their own (new) section Events.
* Removed any quotes or brackets around the event name in existing
  @emit annotations
  Search: @emit.*['"{}(){}]
* For every call to this.emit() anywhere, added @emits.
* Fixed all warnings for references to undefined events
  (introduced as a result of the previous point).
  Event handler parameter documented based on the emit() call
  and actual handlers using the event. Usually the latter is
  more elaborate.
* Extend coverage of jQuery as needed
  (copied from mwcore/maintenance/jsduck/external.js
  written by me, hereby implicitly and explicitly released under MIT).

Specifics
* ve.ce.Surface#onContentChange: Fixed type of range from Object to ve.Range.
* ve.ce.SurfaceObserver#poll: Fix syntax for code from {} to `backticks`.
* ve.ui.Toolbar#onContextChange: Doesn't actually emit "clearState" event.
  Removed #onClearState in Tool, ButtonTool and DropdownTool.

Bug: 45872
Change-Id: Id879aa769b2c72d86a0322e75dddeb868211ce28
2013-03-20 09:58:27 -07:00
Trevor Parscal c535d7c5df Layouts, grids and panels
Layouts
* Makes widget inherit from element
* Adds layout which also inherits from element
* Adds grid and panel layouts
* Uses grid layout in meta dialog

Other changes
* Corrects issues with several of the stand-alone files by fixing and using makeStaticLoader.php

Change-Id: I6b92c0204e176c914c26eff8c03ea417578e080c
2013-03-15 15:12:56 -07:00
Trevor Parscal ec912dc2d1 Link inspector menu not appearing in the right place
ve.ui.Widget.css
* Adjust menu up a few pixels to match other uses of ve.ui.MenuWidget (the format drop down)

ve.ui.LinkInspector.js
* Moved the form value initialization to a timeout that fires well after the animation of the inspector - this is only important because the first element has a menu that pops up and the menu was rendering in the wrong location

ve.ui.Frame.js
* Added reference to frame within this.$$ by passing it to get$$

ve.ui.Inspector.js
* Removed auto-focus on open from inspector base class - this will be done in a more specific and controlled way instead

ve.ui.js
* Added optional frame argument to get$$ so that it's easy to get the frame from any $$ that's bound to an iframe document

ve.ui.Window.js
* Removed duplicate static member assignments
* Added auto-focus on the window's frame before calling onOpen
* Added auto-blur of anything focused within the iframe after calling onClose

ve.ui.MWLinkTargetInputWidget.js
* Auto-highlight the selected item when populating a menu so that pressing enter always keeps the currently selected item selected

ve.ui.TextInputMenuWidget.js
* Take the frame's position into account when positioning a menu below an input

Change-Id: I334f7db29af6b821bcfc8dc3c0ccba2636d4d9b1
2013-03-14 16:56:04 -07:00
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