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-13 00:06:57 +00:00
|
|
|
/*!
|
|
|
|
|
* VisualEditor UserInterface Dialog styles.
|
|
|
|
|
*
|
|
|
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
|
*/
|
|
|
|
|
|
2013-03-06 22:04:20 +00:00
|
|
|
.ve-ui-dialog {
|
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-13 00:06:57 +00:00
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
padding: 1em;
|
2013-03-06 22:04:20 +00:00
|
|
|
line-height: 1em;
|
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-13 00:06:57 +00:00
|
|
|
background-color: #fff;
|
|
|
|
|
background-color: rgba(255,255,255,0.5);
|
2013-04-04 23:12:35 +00:00
|
|
|
-webkit-animation: ve-ui-fade-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
-moz-animation: ve-ui-fade-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
-ms-animation: ve-ui-fade-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
-o-animation: ve-ui-fade-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
animation: ve-ui-fade-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-dialog-closing {
|
|
|
|
|
-webkit-animation: ve-ui-fade-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
-moz-animation: ve-ui-fade-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
-ms-animation: ve-ui-fade-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
-o-animation: ve-ui-fade-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
animation: ve-ui-fade-in 250ms ease-in-out 0 1 reverse;
|
2013-03-06 22:04:20 +00:00
|
|
|
}
|
|
|
|
|
|
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-13 00:06:57 +00:00
|
|
|
.ve-ui-dialog .ve-ui-window-frame {
|
2013-03-26 20:37:55 +00:00
|
|
|
position: fixed;
|
|
|
|
|
top: 1em;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 1em;
|
|
|
|
|
left: 0;
|
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-19 22:59:49 +00:00
|
|
|
margin: auto;
|
2013-03-26 20:37:55 +00:00
|
|
|
width: 800px;
|
2013-04-04 23:12:35 +00:00
|
|
|
min-height: 12em;
|
2013-03-26 20:37:55 +00:00
|
|
|
max-height: 600px;
|
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-13 00:06:57 +00:00
|
|
|
background-color: #fff;
|
|
|
|
|
border: solid 1px #ccc;
|
|
|
|
|
border-radius: 0.5em;
|
|
|
|
|
box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
|
|
|
|
|
overflow: hidden;
|
2013-04-04 23:12:35 +00:00
|
|
|
-webkit-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
-moz-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
-ms-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
-o-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
animation: ve-ui-zoom-in 250ms ease-in-out 0 1 normal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-dialog-closing .ve-ui-window-frame {
|
|
|
|
|
-webkit-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
-moz-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
-ms-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
-o-animation: ve-ui-zoom-in 250ms ease-in-out 0 1 reverse;
|
|
|
|
|
animation: ve-ui-zoom-in 250ms ease-in-out 0 1 reverse;
|
2013-03-06 22:04:20 +00:00
|
|
|
}
|
|
|
|
|
|
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-13 00:06:57 +00:00
|
|
|
.ve-ui-dialog .ve-ui-frame {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-04 23:12:35 +00:00
|
|
|
.ve-ui-window-head,
|
|
|
|
|
.ve-ui-window-body,
|
|
|
|
|
.ve-ui-window-foot {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
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-13 00:06:57 +00:00
|
|
|
.ve-ui-window-head {
|
2013-04-04 23:12:35 +00:00
|
|
|
top: 0;
|
|
|
|
|
height: 3.8em;
|
|
|
|
|
padding: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-window-foot {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
height: 4.8em;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-window-body {
|
|
|
|
|
box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
|
|
|
|
|
top: 3.8em;
|
|
|
|
|
bottom: 4.8em;
|
2013-03-06 22:04:20 +00:00
|
|
|
}
|
|
|
|
|
|
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-13 00:06:57 +00:00
|
|
|
.ve-ui-window-icon {
|
|
|
|
|
width: 2.4em;
|
|
|
|
|
height: 2.8em;
|
|
|
|
|
line-height: 2.8em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-window-title {
|
|
|
|
|
line-height: 2.8em;
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-04 23:12:35 +00:00
|
|
|
.ve-ui-window-foot .ve-ui-buttonWidget {
|
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-13 00:06:57 +00:00
|
|
|
float: right;
|
|
|
|
|
margin: 0.125em 0.25em;
|
2013-03-06 22:04:20 +00:00
|
|
|
}
|
2013-03-15 00:01:01 +00:00
|
|
|
|
2013-04-04 23:12:35 +00:00
|
|
|
.ve-ui-window-closeButton {
|
|
|
|
|
float: right;
|
|
|
|
|
margin: 0.25em 0.25em;
|
2013-03-15 00:01:01 +00:00
|
|
|
}
|
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-19 22:59:49 +00:00
|
|
|
|
2013-04-24 19:40:56 +00:00
|
|
|
.ve-ui-pagedDialog-outlinePanel {
|
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-19 22:59:49 +00:00
|
|
|
border-right: solid 1px #ddd;
|
2013-03-26 20:37:55 +00:00
|
|
|
}
|
2013-05-03 22:17:35 +00:00
|
|
|
|
2013-06-14 00:46:45 +00:00
|
|
|
.ve-ui-pagedDialog-outlinePanel-editable .ve-ui-outlineWidget {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 3em;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-pagedDialog-outlinePanel .ve-ui-outlineControlsWidget {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
box-shadow: 0 0 0.25em rgba(0,0,0,0.25);
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-03 22:17:35 +00:00
|
|
|
.ve-ui-pagedDialog-pagesPanel .ve-ui-panelLayout {
|
|
|
|
|
padding: 1.5em;
|
|
|
|
|
width: 100%;
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
The Great ve.ui.Surface refactor of 2013
Prologue:
Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't
see you there! In a world where iframes are outlaws, and symbols like
document and window are global, there were more than a few assumptions
about which document or window was being used. But fear not - for this
commit (probably) tracks them all down, leaving a trail of
iframe-compatible awesomeness in its wake. With the great ve.ui.Surface
now able to be used inside of iframes, let the reference editing
commence. But there, lurking in the darkness is a DM issue so fierce it
may take Roan and/or Ed up to 3 whole hours to sort it out.
Note to Roan and/or Ed:
Editing references seems to work fine, but when saving the page there
are "no changes" which is a reasonable indication to the contrary.
Objectives:
* Make it possible to have multiple surfaces be instantiated, get along
nicely, and be embedded inside of iframes if needed.
* Make reference content editable within a dialog
Approach:
* Move what's left of ve.Editor to ve.ui.Surface and essentially
obliterate all use of it
* Make even more stuff inherit from ve.Element (long live this.$$)
* Use the correct document or window anywhere it was being assumed to be
the top level one
* Resolve stacking order issues by removing the excessive use of z-index
and introducing global and local overlay elements for each editor
* Add a surface to the reference dialog, load up the reference contents
and save them back on apply
* Actually destroy what we create in ce and ui surfaces
* Add recursive frame offset calculation method to ve.Element
* Moved ve.ce.Surface's getSelectionRect method to the prototype
Bonus:
* Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it
was separate in the first place, but I'm likely the one to blame)
* Fix blatant lies in documentation
* Whitespace cleanup here and there
* Get rid of ve.ui.Window overlays - not used or needed
Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
|
|
|
|
|
|
|
|
/* ve.ui.MWReferenceDialog */
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwReferenceDialog-body {
|
|
|
|
|
padding: 2em;
|
2013-06-12 23:24:38 +00:00
|
|
|
overflow-y: auto;
|
The Great ve.ui.Surface refactor of 2013
Prologue:
Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't
see you there! In a world where iframes are outlaws, and symbols like
document and window are global, there were more than a few assumptions
about which document or window was being used. But fear not - for this
commit (probably) tracks them all down, leaving a trail of
iframe-compatible awesomeness in its wake. With the great ve.ui.Surface
now able to be used inside of iframes, let the reference editing
commence. But there, lurking in the darkness is a DM issue so fierce it
may take Roan and/or Ed up to 3 whole hours to sort it out.
Note to Roan and/or Ed:
Editing references seems to work fine, but when saving the page there
are "no changes" which is a reasonable indication to the contrary.
Objectives:
* Make it possible to have multiple surfaces be instantiated, get along
nicely, and be embedded inside of iframes if needed.
* Make reference content editable within a dialog
Approach:
* Move what's left of ve.Editor to ve.ui.Surface and essentially
obliterate all use of it
* Make even more stuff inherit from ve.Element (long live this.$$)
* Use the correct document or window anywhere it was being assumed to be
the top level one
* Resolve stacking order issues by removing the excessive use of z-index
and introducing global and local overlay elements for each editor
* Add a surface to the reference dialog, load up the reference contents
and save them back on apply
* Actually destroy what we create in ce and ui surfaces
* Add recursive frame offset calculation method to ve.Element
* Moved ve.ce.Surface's getSelectionRect method to the prototype
Bonus:
* Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it
was separate in the first place, but I'm likely the one to blame)
* Fix blatant lies in documentation
* Whitespace cleanup here and there
* Get rid of ve.ui.Window overlays - not used or needed
Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwReferenceDialog-toolbar {
|
|
|
|
|
font-size: 1.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwReferenceDialog-toolbar .ve-ui-toolbar-bar {
|
|
|
|
|
border: solid 1px #ddd;
|
|
|
|
|
border-radius: 0.25em;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 0;
|
2013-06-05 14:02:07 +00:00
|
|
|
border-bottom-width: 0;
|
The Great ve.ui.Surface refactor of 2013
Prologue:
Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't
see you there! In a world where iframes are outlaws, and symbols like
document and window are global, there were more than a few assumptions
about which document or window was being used. But fear not - for this
commit (probably) tracks them all down, leaving a trail of
iframe-compatible awesomeness in its wake. With the great ve.ui.Surface
now able to be used inside of iframes, let the reference editing
commence. But there, lurking in the darkness is a DM issue so fierce it
may take Roan and/or Ed up to 3 whole hours to sort it out.
Note to Roan and/or Ed:
Editing references seems to work fine, but when saving the page there
are "no changes" which is a reasonable indication to the contrary.
Objectives:
* Make it possible to have multiple surfaces be instantiated, get along
nicely, and be embedded inside of iframes if needed.
* Make reference content editable within a dialog
Approach:
* Move what's left of ve.Editor to ve.ui.Surface and essentially
obliterate all use of it
* Make even more stuff inherit from ve.Element (long live this.$$)
* Use the correct document or window anywhere it was being assumed to be
the top level one
* Resolve stacking order issues by removing the excessive use of z-index
and introducing global and local overlay elements for each editor
* Add a surface to the reference dialog, load up the reference contents
and save them back on apply
* Actually destroy what we create in ce and ui surfaces
* Add recursive frame offset calculation method to ve.Element
* Moved ve.ce.Surface's getSelectionRect method to the prototype
Bonus:
* Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it
was separate in the first place, but I'm likely the one to blame)
* Fix blatant lies in documentation
* Whitespace cleanup here and there
* Get rid of ve.ui.Window overlays - not used or needed
Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-window-body .ve-ui-surface {
|
|
|
|
|
padding: 0.25em 1.25em;
|
|
|
|
|
border: solid 1px #ddd;
|
|
|
|
|
border-radius: 0.25em;
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
}
|
2013-05-29 10:03:52 +00:00
|
|
|
|
2013-06-11 19:16:04 +00:00
|
|
|
/* ve.ui.MWTransclusionDialog */
|
2013-05-29 10:03:52 +00:00
|
|
|
|
2013-06-11 19:16:04 +00:00
|
|
|
.ve-ui-mwTransclusionDialog-input {
|
2013-05-29 10:03:52 +00:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-11 19:16:04 +00:00
|
|
|
.ve-ui-mwTransclusionDialog-input textarea {
|
2013-05-29 10:03:52 +00:00
|
|
|
height: 10em;
|
|
|
|
|
}
|
2013-05-25 12:08:43 +00:00
|
|
|
|
2013-06-18 21:24:16 +00:00
|
|
|
.ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-widget,
|
|
|
|
|
.ve-ui-mwTransclusionDialog-addTemplateFieldset .ve-ui-widget {
|
2013-06-11 20:56:22 +00:00
|
|
|
display: inline-block;
|
2013-06-18 21:24:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-buttonWidget,
|
|
|
|
|
.ve-ui-mwTransclusionDialog-addTemplateFieldset .ve-ui-buttonWidget {
|
|
|
|
|
margin-left: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwTransclusionDialog-placeholder-label {
|
|
|
|
|
font-style: italic;
|
2013-06-11 20:56:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ve.ui.MWMetaDialog */
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwMetaDialog-languages-table {
|
|
|
|
|
margin: 2em 0 0 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: none;
|
2013-05-25 12:08:43 +00:00
|
|
|
border-collapse: collapse;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-11 20:56:22 +00:00
|
|
|
.ve-ui-mwMetaDialog-languages-table th {
|
|
|
|
|
border-bottom: solid 1px #ddd;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwMetaDialog-languages-table th, td {
|
|
|
|
|
padding: 0.75em 1em;
|
|
|
|
|
border-bottom: solid 1px white;
|
2013-05-25 12:08:43 +00:00
|
|
|
}
|
|
|
|
|
|
2013-06-11 20:56:22 +00:00
|
|
|
.ve-ui-mwMetaDialog-languages-table tr td:first-child {
|
|
|
|
|
width: 30%;
|
2013-05-25 12:08:43 +00:00
|
|
|
}
|
|
|
|
|
|
2013-06-11 20:56:22 +00:00
|
|
|
.ve-ui-mwMetaDialog-languages-table tr:nth-child(odd) td {
|
2013-05-25 12:08:43 +00:00
|
|
|
background: #F0F0F0;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-11 20:56:22 +00:00
|
|
|
.ve-ui-mwMetaDialog-languages-table tr:nth-child(even) td {
|
2013-05-25 12:08:43 +00:00
|
|
|
background: #F8F8F8;
|
|
|
|
|
}
|
2013-06-06 23:14:11 +00:00
|
|
|
|
|
|
|
|
/* ve.ui.MWMediaInsertDialog */
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwMediaInsertDialog-select {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
2013-06-18 22:58:10 +00:00
|
|
|
|
|
|
|
|
/* ve.ui.MWMediaEditDialog */
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwMediaEditDialog-body {
|
|
|
|
|
padding: 2em;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwMediaEditDialog-toolbar {
|
|
|
|
|
font-size: 1.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ve-ui-mwMediaEditDialog-toolbar .ve-ui-toolbar-bar {
|
|
|
|
|
border: solid 1px #ddd;
|
|
|
|
|
border-radius: 0.25em;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
border-bottom-width: 0;
|
|
|
|
|
}
|