-
Sub-task
-
Resolution: Fixed
-
None
-
None
-
Medium
-
Emptyshow more show less
Instead of the normal right panel on the right next to the target column two small area with the most essential buttons are shown.
The buttons wich are included in the first area:
- "Switch editor mode"
- This button switches the interface to translate5's ergonomic mode, where all panels, menus and features are visible as usual; As icon we use the icon application_view_detail from http://famfamfam.com/lab/icons/silk/previews/index_abc.png (license is already part of translate5)
- "Leave task"
- on pressing it, a pop-up appears, asking "Also finish task?". The pop-up has 2 buttons "Finish" and "Come back later" (the latter is activated by default); We use the same icon for the button, as we are using for the "return to task list" action in the normal editor mode.
The buttons wich are included in the secound area (below the first area):
- Save segment
- Close segment
- Reset segment
- Reposition grid
- Save and open next segment
- Bookmark segment
which of the usual translate5 segment action buttons are actually shown can be configured in the installation
2 additional buttons unique to "visualReview mode" are introduced
- "Comment". Pressing it
- opens a pop-up window, that contains the same content functionality, that in "normal mode" is contained in the lower part of the right panel; As icon we use the same icon that is shown in the column column of the editor.
- "Only show bookmarks". This is a toogle button:
- Pressing it filters the segments to only show the bookmarked segments
- "Un"pressing it shows all segments again.
- The tool-tip of the button explains this behavior. The "pressed" button visualizes a "pressed" state.
- As icon please try attached icon. We should discuss, if it looks good.
Conception
- the new east panel (action buttons) should be develop in separate view, viewcontroller and viewmodel
- it will be also good practice if the buttons also are defined in separate view,viewcontroller. With this the code will be more clean.
- basic code for how and where the buttons should be placed
var west= Ext.ComponentQuery.query('#editorViewport panel[region="west"]')[0]; var east= Ext.ComponentQuery.query('#editorViewport panel[region="east"]')[0]; var north= Ext.ComponentQuery.query('#editorViewport headPanel[region="north"]')[0]; west.setVisible(false); east.setVisible(false); north.setVisible(false); var newPanel= new Ext.panel.Panel({ xtype:'panel', region: 'north', resizable: true, resizeHandles: 's', height:400, html:'<iframe id="pdfLayoutIframe" src="http://translate5.local/pdflayout.html" width="100%" height="100%"></iframe>' }); var actionButtons = new Ext.panel.Panel({ xtype:'panel', region: 'east', layout:'hbox', padding:'0 10 10 10', items: [{ xtype:'panel', autoScroll:true, defaults: {flex: 1, layout: 'form', border: false}, layout:'hbox', items:[{ items: [ { xtype:'container', layout: 'hbox', items:[{ xtype:'button', text:'Switch editor mode', margin:'10 10 10 10' },{ xtype:'button', text:'Save task', margin:'10 10 10 10' }] },{ xtype:'container', layout: 'hbox', items:[{ xtype:'button', text:'Save segment', margin:'10 10 10 10' },{ xtype:'button', text:'Close segment', margin:'10 10 10 10' }] },{ xtype:'container', layout: 'hbox', items:[{ xtype:'button', text:'Reset segment', margin:'10 10 10 10' },{ xtype:'button', text:'Reposition grid', margin:'10 10 10 10' }] },{ xtype:'container', layout: 'hbox', items:[{ xtype:'button', text:'Save and open next segment', margin:'10 10 10 10' },{ xtype:'button', text:'Bookmark segment', margin:'10 10 10 10' }] },{ xtype:'container', layout: 'hbox', items:[{ xtype:'button', text:'Comment', margin:'10 10 10 10' },{ xtype:'button', text:'Only show bookmarks', margin:'10 10 10 10' }] } ] }] }] }); Ext.ComponentQuery.query('#editorViewport')[0].add(newPanel); Ext.ComponentQuery.query('#editorViewport')[0].add(actionButtons);
- blocks
-
- Done