Commit graph

7 commits

Author SHA1 Message Date
Trevor Parscal 6ec34a3dee Toolbar action widgetization and UI refactoring
Objectives:

* Use widgets to render toolbar actions
* Remove labels next to help notices and edit notices buttons
* Add a close button to the help notices and edit notices

Overview:

* ve.ui.ButtonWidget is now abstract, use ve.ui.PushButtonWidget instead
* ve.ui.IconButtonWidget now inherits from ve.ui.ButtonWidget
* ve.ui.PopupWidget's display method no longer takes x and y arguments
* Fixup naming issues in MWCategoryPopupWidget
* Fixup naming issues with some ve-init-mw CSS classes
* Rename ve-mw/ui/styles/ve.ui.Widget.css to ve.ui.MWWidget.css
* Change uses of "callout" to "tail"
* Add hyperlink functionality to buttons
* Make buttons accessible through focusing, but make unfocusable by
  clicking
* Add head option to popup for rendering a title and close button

Bug: 52386
Change-Id: Iea2c8df1be64d40f9c039873d89ee540cc56e687
2013-10-04 16:26:13 -07:00
Trevor Parscal 143b086c74 Scroll into view support
Objectives:

* Scroll when needed to show highlighted (with keyboard) or selected (by
  any means) options in select widgets
* Allow clipping and automatic scrolling for certain elements when they
  are otherwise going to be rendered partially out of view

Changes:

*.php
* Add links to new file

ve.ui.Widget.css, ve.ui.Dialog.css
* Removed unneeded x-axis overflow rules

ve.ui.ClippableElement.js, ve.ui.Element.css
* New mixin, adds visible area clipping support to an element

ve.ui.PopupToolGroup.js, ve.ui.MenuWidget.js
* Mixin clippable element

ve.ui.OptionWidget.js, ve.ui.OutlineItemWidget.js
* Add scroll-into-view configuration for option widgets

ve.ui.SearchWidget.js
* Scroll items into view when highlighting with keyboard

ve.Element.js
* Add getBorders, getDimensions, getClosestScrollableContainer and
  scrollIntoView static methods
* Add getClosestScrollableElementContainer and scrollElementIntoView
  methods

Bug: 53610
Change-Id: Ie21faa973a68f517c7cfce8bd879b5317f536365
2013-09-16 16:46:58 -07:00
Ed Sanders 8c87553761 Rename 'CategoryList' to 'Category' for consistency
Change-Id: I2e3637af38b789e588ce186497238f197e5fd5d3
2013-07-25 13:34:25 +01:00
Trevor Parscal 130e446e52 Single-click insertion
Objectives:

* Reduce the number of clicks and mouse maneuvers required to insert
  media, references or template parameters
* Make use of highlighting with mouse movement or arrow key presses,
  similar to menus, to suggest action when clicked
* Improve the way media search results look and feel

Changes:

ve.ui.SelectWidget.js
* Add mouseleave handler to un-highlight when the mouse exits the widget
* Document highlight events (already being emitted)

ve.ui.SearchWidget.js
* Propagate both select and highlight events from results widget
* Make arrow keys change highlight instead of selection
* Get rid of enter event, make enter key select highlighted item instead
* Provide direct access to results widget through getResults method

ve.ui.MenuWidget.js
* Use the selected item as a starting point if nothing is currently
  highlighted when adjusting the highlight position

ve.ui.Dialog.js
* Add footless option to hide the foot element and make the body extend
  all the way down to the bottom
* Remove applyButton, which only some dialogs need, and should be creating
  themselves, along with other buttons as needed

ve.ui.Widget.css
* Change highlight and selected colors of option widgets to match other
  selection colors used elsewhere
* Leave selected and highlighted widget looking selected

ve.ui.Frame.css
* Add background color to combat any color that might have been applied to
  the frame body in the imported CSS from the parent frame

ve.ui.Dialog.css
* Add rules for footless mode

ve.ui.MWReferenceResultWidget.js,
ve.ui.MWParameterResultWidget.js,
ve.ui.MWMediaResultWidget.js
* Allow highlighting

ve.ui.MWParamterSearchWidget.js
* Switch from selecting the first item when filtering to highlighting

ve-mw/ve.ui.Widget.js
* Adjust media result widget styling to better match other elements

ve.ui.MWTransclusionDialog.js,
ve.ui.MWReferenceListDialog.js,
ve.ui.MWReferenceEditDialog.js,
ve.ui.MWMetaDialog.js
ve.ui.MWMediaEditDialog.js
* Add apply button, as per it being removed from parent class

ve.ui.MWTransclusionDialog.js,
ve.ui.MWReferenceInsertDialog.js,
ve.ui.MWMediaInsertDialog.js
* Insert parameter/reference/media on select, instead of clicking an
  insert button
* Use 'insert' instead of 'apply' as argument for close method

Bug: 50774
Bug: 51143
Change-Id: Ia18e79f1f8df2540f465468edb01f5ce989bf843
2013-07-15 23:42:56 +00:00
Trevor Parscal 703328d770 Make parameter search widget have a horizontal limit
Objective:

* Cut off really long parameter names with ellipsis

Changes:

ve.ui.Widget.css
* Use ellipsis when option labels get too long

ve-mw/ve.ui.Widget.css
* Limit the size of a parameter result widget label - this is a hack, but
  since there are strange bugs with using ellipsis together with % based
  width, it's the best we can do for now

Bug: 50800
Change-Id: Idbfa336d2bba376b0d078fdd0ece65926d610d81
2013-07-10 01:35:38 +00:00
Trevor Parscal 3a6e91dfb7 RTL Improvements
Objectives:

* Make option widget icons correctly placed in RTL
* Make embedded context toolbar correctly placed in RTL

Approach:

Use separate elements for icons within option widgets which have more
flexibility when rendering in either LTR or RTL when compared to CSS
background position. The simpler approach, using CSS background
position offsets, isn't cross-browser compatible at this time.

Changes:

ve.ui.OutlineItemWidget.js
* Remove custom icon implementation, using parent class implementation
  instead

ve.ui.OptionWidget.js
* Add icon option, which adds an icon element only if an icon was
  specified

ve.ui.MenuItemWidget.js, ve-mw/ve.ui.MWParameterResultWidget.js
* Add override for icon config option
* Document icon config as private

ve.ui.Context.js
* Add detection and special handling for positioning embedded context
  toolbar when rendering in RTL

ve.ui.Widget.css
* Add styles for option widget's new icon option
* Add styles to make indentation still work for outline item widgets
* Adjust styles for menu item widget as per changes in option widget

ve-mw/ve.ui.Widget.css
* Adjust styles for parameter result widget as per changes in option
  widget

Change-Id: Ibfa4b613e0fd7902f8a2c78b5717de402c5f82b8
2013-07-10 00:09:22 +00:00
Roan Kattouw 92c38eab85 The great directory split of 2013
Move all MW-specific files into the ve-mw directory, in preparation
for moving them out into a separate repo.

All MW-specific files were moved into a parallel directory structure
in modules/ve-mw . Files with both generic and MW-specific things were
split up. Files in ve/init/mw/ were moved to ve-mw/init/ rather than
ve-mw/init/mw ; they're still named ve.init.mw.* but we should change
that. Some of the test files for core classes had MW-specific test cases,
so those were split up and the test runner was duplicated; we should
refactor our tests to use data providers so we can add cases more easily.

Split files:
* ve.ce.Node.css
* ve.ce.ContentBranchNode.test.js (MWEntityNode)
* ve.ce.Document.test.js (some core test cases genericized)
* ve.dm.InternalList.test.js (uses mwReference test document)
* ve.dm.SurfaceFragment.test.js, ve.ui.FormatAction.test.js
** Made core tests use heading instead of mwHeading
** Updated core tests because normal headings don't break out of lists
** Moved test runners into ve.test.utils.js
* ve.ui.Icons-*.css
* ve.ui.Dialog.css (MW parts into ve.ui.MWDialog.css)
* ve.ui.Tool.css
* ve.ui.Widget.css (move ve-ui-rtl and ve-ui-ltr to ve.ui.css)

ve.dm.Converter.test.js: Moved runner functions into ve.test.utils.js

ve.dm.example.js:
* Refactored createExampleDocument so mwExample can use it
* Removed wgExtensionAssetsPath detection, moved into mw-preload.js
* Genericized withMeta example document (original version copied to mwExample)
* Moved references example document to mwExample

ve.dm.mwExample.js:
* Move withMeta and references example documents from ve.dm.example.js
* Add createExampleDocument function

ve-mw/test/index.php: Runner for MW-specific tests only

ve-mw/test/mw-preload.js: Sets VE_TESTDIR for Special:JavaScriptTest only

ve.ui.Window.js:
* Remove magic path interpolation in addLocalStyleSheets()
* Pass full(er) paths to addLocalStyleSheets(), here and in subclasses

ve.ui.MWDialog.js: Subclass of Dialog that adds MW versions of stylesheets

ve.ui.MW*Dialog.js:
* Subclass MWDialog rather than Dialog
* Load both core and MW versions of stylesheets that have both

ve.ui.PagedDialog.js: Converted to a mixin rather than an abstract base class
* Don't inherit ve.ui.Dialog
* Rather than overriding initialize(), provide initializePages() which the
  host class is supposed to call from its initialize()
* Rename onOutlineSelect to onPageOutlineSelect

ve.ui.MWMetaDialog.js, ve.ui.MWTransclusionDialog.js:
* Use PagedDialog as a mixin rather than a base class, inherit MWDialog

bullet-icon.png: Unused, deleted

Stuff we should do later:
* Refactor tests to use data providers
* Write utility function for SVG compat check
* Separate omnibus CSS files such as ve.ui.Widget.css
* Separate omnibus RL modules
* Use icon classes in ViewPageTarget

Change-Id: I1b28f8ba7f2d2513e5c634927a854686fb9dd5a5
2013-07-02 20:51:38 -07:00