Commit graph

13 commits

Author SHA1 Message Date
Trevor Parscal ef262dc241 Add padded option to layouts
Objectives:

* Add option to layouts to control whether it's padded or not
* Rename "scroll" option to "scrollable" to better fit with it's boolean value

Changes:

ve.ui.Layout.css
* Add styles for scrollable and padded options

ve.ui.StackPanelLayout.js, ve.ui.PagedDialog.js, ve.ui.ReferenceListDialog.js
* Update use of scroll option

ve.ui.PanelLayout.js
* Add padded option
* Rename scroll option to scrollable
* Switch to using a class for scrollable option, rather than hardcoding CSS properties

Change-Id: I50e996b9d2fde361238cde75e09baa5872e12223
2013-07-17 19:10:44 +00:00
Trevor Parscal 09f920fcac Remove field set label on reference edit dialog
Objective:

* Allow fieldsets to not have labels
* Remove label from reference edit dialog field set

Changes:

ve.ui.Layout.css
* Only apply negative top margin if fieldset label is being used

ve.ui.FieldsetLayout.js
* Only add label element to DOM if icon or label are used

ve.ui.MWReferenceEditDialog.js
* Remove label from reference edit dialog's first fieldset

*.php
* Remove unused message

Change-Id: I4a36e819ec6ef73aad80d3fb2f06000cb35ec109
2013-07-15 23:44:07 +00:00
Trevor Parscal 1c637008e5 Tighten up outlines and fieldsets
Objective:

* Make outline widgets and fieldset layouts take up a little less space

Bonus:

* Fix option icons always showing up on the first item because the option
  wasn't position relative

Changes:

ve.ui.Widget.css
* Add position: relative to option widgets
* Cleanup unused background properties for outline items
* Reduce padding for outline items
* Move icons to match padding changes

ve.ui.Layout.css
* Reduce margins for fieldset layouts, including using a negative top
  margin to compensate for the overly tall legend

Change-Id: Ida6147b8171dcb4152ca9be0e099a5f9b81ac1c0
2013-07-11 16:22:38 +00:00
Roan Kattouw e9ca44c86c Transplant CSS from the main document to each iframe
We previously manually loaded CSS into these frames, which is flawed
because it completely bypasses ResourceLoader (so CSSJanus didn't flip
them, necessitating a bunch of hacks for RTL), and doesn't pull in
MediaWiki styles (so templates inside references don't render correctly).
Instead, this commit copies all styles from the main document into each
frame's document, inlining what it can.

Loading all styles in dialogs and inspectors caused some problems,
initially. We didn't namespace our styles for dialogs vs. inspectors
at all; the only reason inspector styles weren't being applied to dialogs
and vice versa was because we controlled which files were being loaded
in which context. This commit namespaces the inspector and dialog styles
where needed so they don't conflict and try to override each other.

Tested in Vector and Monobook, but not in Apex and not in RTL.

ve.init.mw.ViewPageTarget*.css:
* Namespace styles that are only intended for the main document
* Undo Monobook's font-size: x-small; in frames

*Dialog.js:
* Remove addLocalStylesheet() calls, we don't need those any more
** ve.ui.MWDialog seems to be unneeded now, we may want to remove it

*.css:
* Remove @noflip-ped RTL rules where they were just flipped versions of
  their LTR counterparts

ve.ui.Dialog.css, ve.ui.Inspector.css:
* Namespace styles with .ve-ui-dialog-content / .ve-ui-inspector-content

ve.ui.Frame.css:
* Move the margin:0 and padding:0 here (were in the frame <body>'s style
  attribute) and add background:none to prevent frames from getting
  the skin's background (grey in Vector, a book in Monobook)

ve.ui.Dialog.js, ve.ui.Inspector.js:
* Add ve-ui-dialog-content / ve-ui-inspector-content class to the
  frame's content <div> so we can restrict styles to only apply in
  dialogs / inspectors

ve.ui.Frame.js:
* Replace infrastructure for @import-ing stylesheets with transplantation
* Remove code polling to see when the stylesheets were loaded
** We can't do this in the new approach AFAIK, since all styles in the
   frame are either inlined or inaccessible due to the same-origin policy
** We also shouldn't need it because the browser should have cached the
   styles when it loaded the main document
* Apply ve-ui-frame-body class to the frame's <body> so we can style it
** Move inline padding:0;margin:0; into ve.ui.Frame.css
** Move the ve-ltr/ve-rtl class up to the <body>

ve.ui.Window.js:
* Remove infrastructure registering stylesheet URLs to load

Change-Id: I4a37115301811ad860f4578344a04873ea8c2b69
2013-07-09 16:13:28 -07:00
Moriel Schottlender c4c9923c91 Dir fix for iframes and widgets
This fix adds a directionality property to the frame objects so directions
can be inherited and manipulated inside the frame <body> tags.
There are also several corrections to flipping positioning of panels
in the GridLayout and of the icons in fieldsets and labeled elements
so they appear properly (right instead of left).

I've added a 've-rtl' / 've-ltr' class to frame content divs to serve as
selectors for rtl fixes and general language fixes. Most CSS corrections
would likely be fixed when CSSJanus works in iframes, but the selectors
would still be useful.

This sets the stage for directionality inheritance inside iframes,
and fixes most of the problem with the Page Settings window in RTL wikis.
It also fixes all the labels with icons across VE interface.

Bug: 49613
Change-Id: I418e669b0999552167683352acb365a4249ab9cc
2013-07-02 20:20:43 +00:00
Timo Tijhof 82997d73e8 ve.ui.PanelLayout: Set default to span accross available space
Without these properties set, the layout is collapsed into a 0x0px square due to the
parent having overflow-x: auto; and no width/height set.

Change-Id: I77aef8afa3327b11f453196badcdfad3f51f7c3d
2013-06-19 16:20:10 -07:00
Trevor Parscal 91d615e684 Make fieldset layout icons optional
Change-Id: I7617a35bd9e8322d0b9f8e225885ccbe5fa230ee
2013-06-12 16:23:48 -07:00
Trevor Parscal 8409d16f0f Fieldsets and default sort keys
Objective:
* Add default sort key field to meta dialog
* Replace PagePanelLayout with a generic panel containing one or more FieldsetLayout elements

Changes:

*.php
* Added/removed file links

ve.dm.MWDefaultSortMetaItem.js
* Added getContent method

ve.dm.MetaItem.js
* Added replaceWith method

ve.dm.MetaList.js
* Allow insertion at the end by omitting offset and index

ve.dm.MWMetaDialog.js
* Added default sort key field
* Put category and default sort fields inside fieldsets
* Added loading/saving default sort key

ve.ui.PagedLayout.js
* Changed class used for pages to generic panel layout

ve.ui.PagePanelLayout
* Moved title/icon stuff to field set

ve.ui.FieldsetLayout.js
* New class, adds fieldset with legend

ve.ui.StackPanelLayout.js
* Moved up to the layouts directory

ve.ui.Dialog.css
* Moved style for paged panel from layout stylesheet

ve.ui.Layout.css
* Added styles for fieldsets

ve.ui.Widget.css
* Adjusted margins of input label widgets

ve.ui.MWCategoryWidget.js, ve.ui.MWCategoryPopupWidget.js
* Added setDefaultSortKey method

Change-Id: I979f5e3f08a688790c9f54086206ed1999af13ea
2013-05-10 16:46:08 -07:00
Trevor Parscal e888d7b985 Category UI improvements
Objectives:
* Ensure items don't get moved to the end when their sort-key is edited
* Add placeholder text and pending styling to input
* Auto-expand input to the end of the line
* Make the minimum input width smaller

Changes:

ve.ui.MWMetaDialog.js
* Added calls to fitInput on initialize
* Fixed sort key update and insert handlers to maintain item position when updating

ve.ui.GroupElement.js
* Added index argument to addItems, allowing items to be inserted at a specific location

ve.ui.PagePanelLayout.js
* Fixed CSS class name

ve.ui.StackPanelLayout.js, ve.ui.MenuWidget.js, ve.ui.SelectWidget.js
* Passed index argument through to group element

ve.ui.PanelLayout.js
* Fixed overflow direction for scrolling option

ve.ui.Inspector.css
* Moved border-box properties to text input widget class
* Set input widget within inspectors to be 100% by default

ve.ui.Layout.css
* Updated CSS class name
* Whitespace fixes

ve.ui.Widget.css
* Made text input widgets's wrapper default to 20em wide and the input inside it be 100%, using border-box to ensure proper sizing
* Adjusted category list item and input styles to make input appear more like a category item
* Whitespace fixes

ve.ui.MWCategoryInputWidget.js
* Made category input widget inherit text input widget, rather than just input widget

ve.ui.MWCategoryWidget.js
* Replaced group functionality by mixing in group element
* Added fitInput, which automatically make the input fill the rest of the line or take up the entire next line depending on how much space is left

VisualEditor.i18n.php
* Adjusted placeholder text for category input

Change-Id: I79a18a7b849804027473084a42c36133fdacad57
2013-05-10 00:19:46 +00:00
Trevor Parscal 6a068e7d83 UI Refactor
Changed:

VisualEditor.i18n.php
* Updated Link inspector i18n messages

ve.ui.MetaDialog.js -> ve.ui.PagedDialog
* Moved paging functionality into Paged dialog

ve.ui.EditorPanelLayout -> ve.ui.PagePanelLayout.js
* Renamed from EditorPanelLayout to work nicely with the concept of
  stacks and pages

ve.ui.GroupElement.js
* Added addItem method and change addItems to use it

ve.ui.Dialog.css
* Updated classname as per refactor of meta dialog

ve.ui.StackPanelLayout.js
* Set currentItem property on showItem
* In addItems method, show currentItem with class method
** rather display block on element

ve.ui.Layout.css
* Make editorPanel layout 100% in width.

ve.ui.Widget.css
* Added CategoryWidget and CategoryPopup styles
* Other adjustments

ve.ui.PopupWidget.js
* Added auto-close on loss of focus
* Made friendly with being initialized inside a frame

ve.ui.MWLinkTargetInputWidget.js
* Mixin ve.ui.PendingInputWidget and remove pending methods
* Prevent querying on spaces
* Reintroduce i18n messages for menu sections

ve.ui.MenuWidget.js
* Update cases of $input config property to input

New:

ve.ui.PagedDialog.js
* Refactored base-class for mwMeta dialog (and probably other dialogs
  too)
* Abstracts adding and accessing pages

ve.ui.PendingInputWidget.js
* Moved pushPending and popPending methods into pending class

Change-Id: I29bcd92b7b5641941a4e98e65b2a56424a5263ff
2013-04-26 21:18:13 +00: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 168fcec387 Added layouts and fixed up dialog styling issues
ve.ui.Dialog.css
* Fix issue where the use of margin auto on the outer dialog wrapper
  would expose parts of the underlying content - this is resolved by
  making the outer wrapper cover the whole screen and making the
  window frame use margin auto

ve.ui.Icons*.css
* Added missing settings icon rule

ve.ui.Layout.css
* Added styles for editor panel

ve.ui.Window.css
* Removed default height, setting it specifically in inspector now

ve.ui.EditorPanelLayout.js
* New layout, adds a title and icon above the content

ve.ui.TitledEditorLayout.js
* Similar to labeled widget, but for panels

ve.ui.MetaDialog.js
* Using settings icon now
* Switched to using a specific layout - still hard-coded for
  categories

ve.ui.Frame.js
* Modified style loader to guarantee order of style rules, no matter
  what order they load in

*.php
* Moved layouts to be included after widgets so they can use widgets
* Added links to new layouts

Change-Id: I7ff5f5f095460fd4f6cf841f4182bfb92bf034da
2013-03-26 20:52:35 +00: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