wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-24 18:58:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Added layouts and fixed up dialog styling issues"

Browse source
This commit is contained in:
jenkins-bot 2013-03-27 18:15:05 +00:00 committed by Gerrit Code Review
parent 47691cf586 168fcec387
commit 686d4ddc71
13 changed files with 155 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
VisualEditor.php
View file

@ -328,9 +328,6 @@ $wgResourceModules += array(
've/ui/ve.ui.Toolbar.js',
've/ui/ve.ui.ToolFactory.js',
've/ui/layouts/ve.ui.GridLayout.js',
've/ui/layouts/ve.ui.PanelLayout.js',
've/ui/widgets/ve.ui.LabeledWidget.js',
've/ui/widgets/ve.ui.FlaggableWidget.js',
've/ui/widgets/ve.ui.GroupWidget.js',
@ -350,6 +347,11 @@ $wgResourceModules += array(
've/ui/widgets/ve.ui.LinkTargetInputWidget.js',
've/ui/widgets/ve.ui.MWLinkTargetInputWidget.js',
've/ui/layouts/ve.ui.GridLayout.js',
've/ui/layouts/ve.ui.PanelLayout.js',
've/ui/layouts/panels/ve.ui.TitledPanelLayout.js',
've/ui/layouts/panels/ve.ui.EditorPanelLayout.js',
've/ui/dialogs/ve.ui.ContentDialog.js',
've/ui/dialogs/ve.ui.MetaDialog.js',

8
demos/ve/index.php
View file

@ -209,8 +209,6 @@ $html = file_get_contents( $page );
<script src="../../modules/ve/ui/ve.ui.Tool.js"></script>
<script src="../../modules/ve/ui/ve.ui.Toolbar.js"></script>
<script src="../../modules/ve/ui/ve.ui.ToolFactory.js"></script>
<script src="../../modules/ve/ui/layouts/ve.ui.GridLayout.js"></script>
<script src="../../modules/ve/ui/layouts/ve.ui.PanelLayout.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.GroupWidget.js"></script>
@ -229,6 +227,10 @@ $html = file_get_contents( $page );
<script src="../../modules/ve/ui/widgets/ve.ui.TextInputMenuWidget.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script>
<script src="../../modules/ve/ui/widgets/ve.ui.MWLinkTargetInputWidget.js"></script>
<script src="../../modules/ve/ui/layouts/ve.ui.GridLayout.js"></script>
<script src="../../modules/ve/ui/layouts/ve.ui.PanelLayout.js"></script>
<script src="../../modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js"></script>
<script src="../../modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js"></script>
<script src="../../modules/ve/ui/dialogs/ve.ui.ContentDialog.js"></script>
<script src="../../modules/ve/ui/dialogs/ve.ui.MetaDialog.js"></script>
<script src="../../modules/ve/ui/tools/ve.ui.ButtonTool.js"></script>
@ -261,7 +263,7 @@ $html = file_get_contents( $page );
ve.createDocumentFromHTML( <?php echo json_encode( $html ) ?> )
);
$( '.ve-ce-documentNode' ).focus();
//ve.instances[0].dialogs.open( 'meta' );
ve.instances[0].dialogs.open( 'meta' );
} );
</script>

6
modules/ve/test/index.php
View file

@ -154,8 +154,6 @@
<script src="../../ve/ui/ve.ui.Tool.js"></script>
<script src="../../ve/ui/ve.ui.Toolbar.js"></script>
<script src="../../ve/ui/ve.ui.ToolFactory.js"></script>
<script src="../../ve/ui/layouts/ve.ui.GridLayout.js"></script>
<script src="../../ve/ui/layouts/ve.ui.PanelLayout.js"></script>
<script src="../../ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
<script src="../../ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
<script src="../../ve/ui/widgets/ve.ui.GroupWidget.js"></script>
@ -174,6 +172,10 @@
<script src="../../ve/ui/widgets/ve.ui.TextInputMenuWidget.js"></script>
<script src="../../ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script>
<script src="../../ve/ui/widgets/ve.ui.MWLinkTargetInputWidget.js"></script>
<script src="../../ve/ui/layouts/ve.ui.GridLayout.js"></script>
<script src="../../ve/ui/layouts/ve.ui.PanelLayout.js"></script>
<script src="../../ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js"></script>
<script src="../../ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js"></script>
<script src="../../ve/ui/dialogs/ve.ui.ContentDialog.js"></script>
<script src="../../ve/ui/dialogs/ve.ui.MetaDialog.js"></script>
<script src="../../ve/ui/tools/ve.ui.ButtonTool.js"></script>

6
modules/ve/ui/dialogs/ve.ui.MetaDialog.js
View file

@ -35,6 +35,8 @@ ve.inheritClass( ve.ui.MetaDialog, ve.ui.Dialog );
*/
ve.ui.MetaDialog.static.titleMessage = 'visualeditor-dialog-meta-title';
ve.ui.MetaDialog.static.icon = 'settings';
/* Methods */
/**
@ -48,7 +50,9 @@ ve.ui.MetaDialog.prototype.initialize = function () {
// Properties
this.outlinePanel = new ve.ui.PanelLayout( { '$$': this.$$ } );
this.editorPanel = new ve.ui.PanelLayout( { '$$': this.$$ } );
this.editorPanel = new ve.ui.EditorPanelLayout( {
'$$': this.$$, 'title': 'Categories', 'icon': 'categories'
} );
this.layout = new ve.ui.GridLayout(
[this.outlinePanel, this.editorPanel],
{ '$$': this.$$, 'widths': [1, 2] }

38
modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js Normal file
View file

@ -0,0 +1,38 @@
/*!
* VisualEditor UserInterface EditorPanelLayout class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Editor panel layout.
*
* @class
* @extends ve.ui.PanelLayout
* @mixins ve.ui.LabeledWidget
*
* @constructor
* @param {Object} [config] Config options
* @cfg {string} [icon=''] Symbolic icon name
*/
ve.ui.EditorPanelLayout = function VeUiEditorPanelLayout( config ) {
// Config initialization
config = ve.extendObject( config, { 'scroll': true } );
// Parent constructor
ve.ui.PanelLayout.call( this, config );
// Mixin constructors
ve.ui.TitledPanelLayout.call( this, this.$$( '<div>' ), config );
// Initialization
this.$title.addClass( 've-ui-icon-' + config.icon + '-big' );
this.$.append( this.$title ).addClass( 've-ui-editorPanelLayout' );
};
/* Inheritance */
ve.inheritClass( ve.ui.EditorPanelLayout, ve.ui.PanelLayout );
ve.mixinClass( ve.ui.EditorPanelLayout, ve.ui.TitledPanelLayout );

49
modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js Normal file
View file

@ -0,0 +1,49 @@
/*!
* VisualEditor UserInterface TitledPanelLayout class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Creates an ve.ui.TitledPanelLayout object.
*
* @class
* @abstract
*
* @constructor
* @param {jQuery} $title Label element
* @param {Object} [config] Config options
* @cfg {jQuery|string} [title=''] Title text
*/
ve.ui.TitledPanelLayout = function VeUiTitledPanelLayout( $title, config ) {
// Config intialization
config = config || {};
// Properties
this.$title = $title;
// Initialization
this.$title.addClass( 've-ui-titledPanelLayout-title' );
this.setTitle( config.title );
};
/* Methods */
/**
* Set the title.
*
* @method
* @param {jQuery|string} [value] jQuery HTML node selection or string text value to use for label
* @chainable
*/
ve.ui.TitledPanelLayout.prototype.setTitle = function ( value ) {
if ( typeof value === 'string' && value.length && /[^\s]*/.test( value ) ) {
this.$title.text( value );
} else if ( value instanceof jQuery ) {
this.$title.empty().append( value );
} else {
this.$title.html( '&nbsp;' );
}
return this;
};

15
modules/ve/ui/styles/ve.ui.Dialog.css
View file

@ -11,9 +11,6 @@
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-height: 3em;
max-height: 600px;
padding: 1em;
line-height: 1em;
background-color: #fff;
@ -22,9 +19,15 @@
}
.ve-ui-dialog .ve-ui-window-frame {
width: 800px;
height: 100%;
position: fixed;
top: 1em;
right: 0;
bottom: 1em;
left: 0;
margin: auto;
width: 800px;
min-height: 3em;
max-height: 600px;
background-color: #fff;
border: solid 1px #ccc;
border-radius: 0.5em;
@ -70,4 +73,4 @@
.ve-ui-metaDialog-outlinePanel {
border-right: solid 1px #ddd;
}
}

5
modules/ve/ui/styles/ve.ui.Icons-raster.css
View file

@ -25,6 +25,11 @@
background-image: url(images/icons/categories.png);
}
.ve-ui-icon-settings {
/* @embed */
background-image: url(images/icons/settings.png);
}
.ve-ui-icon-remove {
/* @embed */
background-image: url(images/icons/remove.png);

5
modules/ve/ui/styles/ve.ui.Icons-vector.css
View file

@ -25,6 +25,11 @@
background-image: url(images/icons/categories.svg);
}
.ve-ui-icon-settings {
/* @embed */
background-image: url(images/icons/settings.svg);
}
.ve-ui-icon-remove {
/* @embed */
background-image: url(images/icons/remove.svg);

4
modules/ve/ui/styles/ve.ui.Inspector.css
View file

@ -18,6 +18,10 @@
height: 3em;
}
.ve-ui-window-head {
height: 2em;
}
.ve-ui-window-icon {
padding-left: 0.5em;
margin-left: 0.25em;

17
modules/ve/ui/styles/ve.ui.Layout.css
View file

@ -20,3 +20,20 @@
.ve-ui-panelLayout {
position: absolute;
}
/* ve.ui.EditorPanelLayout */
.ve-ui-editorPanelLayout {
padding: 1.5em;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.ve-ui-editorPanelLayout .ve-ui-titledPanelLayout-title {
font-size: 1.5em;
padding-left: 1.75em;
margin-bottom: 1em;
background-position: left center;
background-repeat: no-repeat;
}

1
modules/ve/ui/styles/ve.ui.Window.css
View file

@ -10,7 +10,6 @@
}
.ve-ui-window-head {
height: 2em;
padding: 0.5em;
-webkit-touch-callout: none;
-webkit-user-select: none;

14
modules/ve/ui/ve.ui.Frame.js
View file

@ -49,7 +49,8 @@ ve.inheritClass( ve.ui.Frame, ve.EventEmitter );
* @emits initialize
*/
ve.ui.Frame.prototype.onLoad = function () {
var i, len, doc, $head,
var i, len, doc,
css = [],
promises = [],
stylesheets = this.config.stylesheets,
stylesheetPath = ve.init.platform.getModulesUrl() + '/ve/ui/styles/';
@ -66,16 +67,19 @@ ve.ui.Frame.prototype.onLoad = function () {
// Properties
this.$$ = ve.ui.get$$( doc, this );
this.$content = this.$$( '.ve-ui-frame-content' );
// Add stylesheets
$head = this.$$( 'head' );
function embedCss( css ) {
$head.append( '<style>' + css + '</style>' );
function setter( index ) {
return function ( data ) {
css[index] = data;
};
}
for ( i = 0, len = stylesheets.length; i < len; i++ ) {
promises.push( $.get( stylesheetPath + stylesheets[i], embedCss ) );
promises.push( $.get( stylesheetPath + stylesheets[i], setter( i ) ) );
}
$.when.apply( $, promises )
.done( ve.bind( function () {
this.$$( 'head' ).append( '<style>' + css.join( '\n' ) + '</style>' );
this.initialized = true;
this.emit( 'initialize' );
}, this ) );