Oliverb has uploaded a new change for review.
https://gerrit.wikimedia.org/r/159316
Change subject: Custom sub-toolbar for table tools.
......................................................................
Custom sub-toolbar for table tools.
Change-Id: I243570a76235b569b93b47f238df2c25bb3e7a12
---
M demos/ve/demo.js
M demos/ve/desktop.html
A src/ui/styles/ve.ui.TableToolbar.css
A src/ui/ve.ui.TableToolbar.js
4 files changed, 168 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/16/159316/1
diff --git a/demos/ve/demo.js b/demos/ve/demo.js
index 7796252..83c253e 100644
--- a/demos/ve/demo.js
+++ b/demos/ve/demo.js
@@ -251,7 +251,8 @@
);
currentTarget.on( 'surfaceReady', function () {
- var surfaceView =
currentTarget.getSurface().getView();
+ var surface = currentTarget.getSurface();
+ var surfaceView = surface.getView();
// Container must be properly hidden before
slideDown animation
$targetContainer.removeAttr( 'style' ).hide()
// Restore directionality
@@ -260,6 +261,19 @@
$targetContainer.slideDown().promise().done(
function () {
surfaceView.focus();
} );
+
+ // HACK: injecting a contextual sub-toolbar for
table editing
+ // TODO: find a proper approach for that
+ // Alternatives:
+ // - contextual toolbar around the CE element
+ // - inspector popup
+ var $subToolbars = $('<div>');
+ $subToolbars.append( $('<div
style="clear:both"></div>' ) );
+ var tableToolbar = new
ve.ui.TableToolbar(surface, {
+ $context: $subToolbars
+ });
+ $subToolbars.append(tableToolbar.$element);
+
$subToolbars.insertAfter(currentTarget.getToolbar().$actions);
} );
}
diff --git a/demos/ve/desktop.html b/demos/ve/desktop.html
index fe3ccc4..66cb8bb 100644
--- a/demos/ve/desktop.html
+++ b/demos/ve/desktop.html
@@ -54,6 +54,7 @@
<link rel=stylesheet
href="../../src/ui/styles/ve.ui.Surface.css">
<link rel=stylesheet
href="../../src/ui/styles/widgets/ve.ui.SurfaceWidget.css">
<link rel=stylesheet
href="../../src/ui/styles/ve.ui.Toolbar.css">
+ <link rel=stylesheet
href="../../src/ui/styles/ve.ui.TableToolbar.css">
<link rel=stylesheet href="../../src/ui/styles/ve.ui.Icons.css">
<!-- visualEditor.desktop.build -->
@@ -285,6 +286,7 @@
<script src="../../src/ui/ve.ui.Tool.js"></script>
<script src="../../src/ui/ve.ui.Toolbar.js"></script>
<script src="../../src/ui/ve.ui.TargetToolbar.js"></script>
+ <script src="../../src/ui/ve.ui.TableToolbar.js"></script>
<script src="../../src/ui/ve.ui.DebugBar.js"></script>
<script src="../../src/ui/ve.ui.ToolFactory.js"></script>
<script src="../../src/ui/ve.ui.Command.js"></script>
diff --git a/src/ui/styles/ve.ui.TableToolbar.css
b/src/ui/styles/ve.ui.TableToolbar.css
new file mode 100644
index 0000000..0b48f52
--- /dev/null
+++ b/src/ui/styles/ve.ui.TableToolbar.css
@@ -0,0 +1,56 @@
+.ve-ui-tableToolbar {
+ height: 55px;
+}
+
+.ve-ui-tableToolbar .oo-ui-toolbar-tools {
+ width: 100%;
+}
+
+.ve-ui-tableToolbar .oo-ui-toolbar-tools .oo-ui-tool a.oo-ui-tool-link {
+ height: 2.5em;
+}
+
+/* Center icon and show label */
+
+.ve-ui-tableToolbar .oo-ui-toolbar-tools .oo-ui-tool {
+ min-width: 50px;
+ text-align: center;
+ vertical-align: inherit;
+}
+
+.ve-ui-tableToolbar .oo-ui-toolbar-tools .oo-ui-tool .oo-ui-iconElement-icon {
+ margin: 0px auto;
+ width: 28px;
+ height: 28px;
+}
+
+.ve-ui-tableToolbar .oo-ui-toolbar-tools .oo-ui-tool .oo-ui-tool-title {
+ display: inline;
+ font-size: 10px;
+}
+
+.ve-ui-tableToolbar .oo-ui-toolbar-tools .toolGroupTitle {
+ display: inline-block;
+ font-size: 10px;
+ font-style: italic;
+ padding: 2px 0px 0px 5px;
+ margin-right: 10px;
+}
+
+/* Separators and Labels */
+
+.ve-ui-tableToolbar .toolbarTitle {
+ float:left;
+ font-size: 18px;
+ padding-top: 25px;
+ padding-left: 20px;
+ padding-right: 40px;
+}
+
+.ve-ui-tableToolbar .toolbarSeparator {
+ display: inline-block;
+ vertical-align: middle;
+ width: 1px;
+ height: 40px;
+ border-left: solid 1px #ccc;
+}
diff --git a/src/ui/ve.ui.TableToolbar.js b/src/ui/ve.ui.TableToolbar.js
new file mode 100644
index 0000000..3cb6bf1
--- /dev/null
+++ b/src/ui/ve.ui.TableToolbar.js
@@ -0,0 +1,95 @@
+/**
+ * An experimental toolbar for table editing.
+ * In the demo we dock the toolbar into the target toolbar and show it only
+ * when a table is focussed.
+ *
+ * OO.ui.Toolbar is hacked to insert separators and labels.
+ * TODO: maybe there could be a concept for such toolbars?
+ * - Contextual sub-toolbar
+ * - title, labels, separators
+ *
+ */
+ve.ui.TableToolbar = function VeUiTableToolbar( surface, config ) {
+ OO.ui.Toolbar.call(this, ve.ui.toolFactory, ve.ui.toolGroupFactory,
config);
+
+ this.surface = surface;
+
+ // DOM changes
+
+ this.setup([
+ {
+ classes: ['tableToolbar-insertGroup'],
+ include: [ 'insertRowBefore', 'insertRowAfter',
'insertColumnBefore', 'insertColumnAfter' ]
+ },
+ {
+ classes: ['tableToolbar-deleteGroup'],
+ include: [ 'deleteRow', 'deleteColumn', 'deleteTable' ]
+ }
+ ]);
+
+ this.$element.addClass('ve-ui-tableToolbar');
+ // title for the toolbar
+ $('<div>').addClass('toolbarTitle')
+ .append($('<span>').text('Table'))
+ .insertBefore(this.$element.find('.tableToolbar-insertGroup'));
+ // separator before the insert group
+ $('<div>').addClass('toolbarSeparator')
+ .insertBefore(this.$element.find('.tableToolbar-insertGroup'));
+ // label for the insert group
+ this.$element.find('.tableToolbar-insertGroup .oo-ui-toolGroup-tools')
+ .prepend( $('<div>').addClass('toolGroupTitle')
+ .append( $('<span>')
+ .text( OO.ui.deferMsg(
'visualeditor-toolbar-table-insert' ) ) ) );
+ // separator before the delete group
+ $('<div>').addClass('toolbarSeparator')
+ .insertBefore(this.$element.find('.tableToolbar-deleteGroup'));
+ // label for the delete group
+ this.$element.find('.tableToolbar-deleteGroup .oo-ui-toolGroup-tools')
+ .prepend( $('<div>').addClass('toolGroupTitle')
+ .append( $('<span>')
+ .text( OO.ui.deferMsg(
'visualeditor-toolbar-table-delete' ) ) ) );
+
+ this.setVisible(false);
+
+ // Events
+
+ this.surface.getModel().connect( this, { contextChange:
'onContextChange' } );
+};
+
+OO.inheritClass( ve.ui.TableToolbar, OO.ui.Toolbar );
+
+ve.ui.TableToolbar.prototype.getSurface = function() {
+ return this.surface;
+};
+
+/**
+ * Handle context changes on the surface.
+ *
+ * @fires updateState
+ */
+ve.ui.TableToolbar.prototype.onContextChange = function () {
+ this.updateToolState();
+};
+
+/**
+ * Update the state of the tools
+ */
+ve.ui.TableToolbar.prototype.updateToolState = function () {
+ var surface, selection, tableSelection;
+ surface = this.surface.getModel();
+ selection = surface.selection;
+ tableSelection = ve.dm.TableNode.lookupSelection(surface.documentModel,
selection);
+ if (tableSelection) {
+ this.setVisible(true);
+ } else {
+ this.setVisible(false);
+ }
+};
+
+ve.ui.TableToolbar.prototype.setVisible = function ( visible ) {
+ if (visible) {
+ this.$element.css({ 'visibility': '' });
+ } else {
+ this.$element.css({ 'visibility': 'hidden' });
+ }
+};
--
To view, visit https://gerrit.wikimedia.org/r/159316
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I243570a76235b569b93b47f238df2c25bb3e7a12
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Oliverb <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
