Start Menu for 2.0 Desktop

[mxracer]

Please visit www.qWikiOffice.com for latest updates.

I have put this project on GitHub:
https://github.com/ToddMurdock/qWikiOffice

Mar. 8th.

The desktop shortcuts are no longer limited to a single column. They self manage their positions based on the desktop height.

Files updated are

1. system/core/Desktop.js
2. system/core/Shortcut.js
3. resources/css/desktop.css


Feb. 22nd.

Version 0.7.1 is available.

See Blog for details. Release notes are on the download page.

Dec. 20th.

1. Updated DesktopConfig.js and App.js. There was a bug in the code. Sub sub menus, and so on, was not supported in the start menu. I updated App.js initStartMenu().
2. Taskbar wasn't being displayed properly in FF 3 Beta 2. Re-ordered the include statements to fix it.
3. Added code to App.js to prevent the backspace (history back 1) shortcut while in the desktop environment.
4. Updated Ext.ux.TaskBar.TaskButton in Taskbar.js. TaskButton's context menu now checks for window's maximizable and closable properties.
5. Worked on Vista theme, login.js and login.css.
6. Updated Preferences window with ability to set and save Auto Run apps.

Dec. 11th.

1. New directory structure
2. Db tables updated
3. Theme support added to Preferences module

View readme.txt in the zip file.

Desktop Config

1. Added a context menu for the Desktop.
2. Now all modules are passed into the initModules() method, which no longer adds them to the Start Menu. This allows modules to be initialized into the desktop without adding them to the Start Menu.
3. Modules are now added to the Desktops Context Menu, Start Menu and Quick Start in the initDesktopContextMenu, initStartMenu() and initQuickStart() method respectively. These methods use the desktopConfig object to add modules.
4. The DesktopConfig can be hard coded or passed in via json from the server.

Preferences Window

1. Dec. 11th. Theme support added.
2. Can set Taskbar transparency.
3. Wallpapers loading. Now saving to database.
4. Now saving to the database.
5. Hooked up the Preferences tool button in the Start Menu to open the Preferences window. Preferences window contains a West and Center panel. The center panel is loaded with a Checkbox Tree. The tree is is loaded with all apps, any that are currently in the Quick Start panel are checked.
6. Which apps appear in the Quick Start panel can be controlled by checking their items in the Quick Start tree. Code is in place that gathers all checked item id's when the Save button is clicked.

Misc.

1. Multiple code changes. Start Menu and Quick Start apps can now be either hard coded or passed in from json data.
2. Added Preferences window.
3. Added Start Menu config option: toolPanelWidth.
4. Added Jack's code improvements from his demo.
5. Can now add the Quick Start apps from local or remote data.
6. Tool items in the Start Menu are now buttons. I'll update the zip file once I've cleaned up the code.

To Do's

1. [Dec. 5th]Finish Preferences window. Hopefully this week.

Extensions:

1. Ext.ux.StartMenuTool, extends Ext.menu.Item
2. Ext.ux.StartMenu, extends Ext.menu.Menu
3. Ext.ux.Taskbar, extends Ext.util.Observable
4. Ext.Desktop, modified from Jack's demo

Features:

1. Start Menu.
2. Scrollable taskbar. I ported the tab scrolling code into the Taskbar.
3. Quick start panel with working menu button that appears if you resize the panel down so some of the buttons are hidden. The menu updates so only the hidden buttons are listed as items

Known Issues

1. FIXED The quick start panel is now working correctly in all the browsers I have. The bug in Opera and Safari was a simple CSS error on my part.
2. In IE 6, if you grab the split bar that is between the Quick Start panel and the Task Buttons Panel, you can only resize to the right, not the left. I'm not sure if this is a bug with Ext or if its my doing yet.

Browsers I have to test with

1. FF 2
2. IE 6
3. IE 7
4. Opera 9
5. Safari for Windows

[santoshrestha]

do you have a demo login info?

[jack.slocum]

That looks real nice!

[Foggy]

that looks awesome.
But if you want add some individual style to the start button, you can do something like this

desktop.htm

        <div id="x-desktop">
            <div style="padding:15px;"></div>
        </div>
        
        <div id="x-windows">
            <!-- this div contains the start menu -->
            <div id="x-toolbar" style="float:left;"></div>
            <div id="x-winlist" style="float:left;">
                <div id="spacer"></div>
            </div>
            <div class="x-clear"></div>
        </div>

desktop.css

/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */

html, body {
	font: normal 12px tahoma, arial, verdana, sans-serif;
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow: hidden;
	height: 100%;
}

img {
   behavior: url("css/pngbehavior.htc");
}


#x-desktop {
	width: 100%;
	height: 100%;
	border: 0 none;
	position: relative;
    overflow:hidden;
    zoom: 1;
}

#x-windows .x-toolbar {
	border: 0 none;
	background: 0 none;
	width: 70px;
	padding-right: 5px;
	margin-right: 3px;
	border-right: 1px solid #3A75BD;
}

#x-winlist .x-btn {
	float: left;
	margin: 2px 0 0 2px;
    position:relative;
}

#x-winlist button {
	width: 150px;
	overflow: hidden;
	text-align: left;
	color: #15428b;
}

#x-windows {
	border-top: 1px solid #3A75BD;
	background-color: #D5E2F2;
	padding-top: 2px;
	height: 26px;
    position:relative;
	z-index:12001;
}

#x-info {
    float:right;
}

#x-winlist .x-btn-left{
	background:url(../images/winbar-btn.gif) no-repeat 0 -189px;
}
#x-winlist .x-btn-right{
	background:url(../images/winbar-btn.gif) no-repeat 0 -210px;
}
#x-winlist .x-btn-center{
	background:url(../images/winbar-btn.gif) repeat-x 0 -231px;
}

#x-winlist .x-btn-over .x-btn-left{
	background:url(../images/winbar-btn.gif) no-repeat 0 0;
}
#x-winlist .x-btn-over  .x-btn-right{
	background:url(../images/winbar-btn.gif) no-repeat 0 -21px;
}
#x-winlist .x-btn-over .x-btn-center{
	background:url(../images/winbar-btn.gif) repeat-x 0 -42px;
}

#x-winlist .x-btn-click .x-btn-left{
	background:url(../images/winbar-btn.gif) no-repeat 0 -63px;
}
#x-winlist .x-btn-click  .x-btn-right{
	background:url(../images/winbar-btn.gif) no-repeat 0 -84px;
}
#x-winlist .x-btn-click .x-btn-center{
	background:url(../images/winbar-btn.gif) repeat-x 0 -105px;
}

#x-winlist .active-win .x-btn-left{
	background:url(../images/winbar-btn.gif) no-repeat 0 -126px;
}
#x-winlist .active-win  .x-btn-right{
	background:url(../images/winbar-btn.gif) no-repeat 0 -147px;
}
#x-winlist .active-win .x-btn-center{
	background:url(../images/winbar-btn.gif) repeat-x 0 -168px;
}
#x-winlist .active-win .x-btn-center button {
    color:#fff;
}

#spacer {
	height: 25px;
	float: left;
	width: 0;
	overflow: hidden;
	margin-top: 2px;
}

.x-window-body p,.x-panel-body p {
	padding: 10px;
	margin: 0;
}

.x-window-body {
    background:#fff;
}

.add {
    background-image:url(../shared/icons/fam/add.gif) !important;
}
.option {
    background-image:url(../shared/icons/fam/plugin.gif) !important;
}
.remove {
    background-image:url(../shared/icons/fam/delete.gif) !important;
}
.save {
    background-image:url(../shared/icons/save.gif) !important;
}

And maybe this small snippet could interest you. With this you could submit your form by pressing the enter Button in a Form Field

	function sendForm(e) {
		if(e.getKey() == e.ENTER){
			login.getForm().submit({
				waitMsg:'Überprüfe Daten...',
				// callback handler if submit has successed
				success: doLogin,
				// callback handler if submit has failed
				failure: function() {
					  Ext.MessageBox.alert('Fehler', 'Ihre Login-Daten sind Fehlerhaft');
				}
			});
		}
	}
	Ext.get('loginFormUserField').on('keydown', sendForm);/**/
	Ext.get('loginFormPassField').on('keydown', sendForm);/**/
	Ext.get('loginFormUserField').focus();

[mxracer]

Thanks guys!

Ok I set up this demo area. Remember its still a work in progress http://qwikioffice.com/desktop-demo/

Username: demo
Password: demo

I have added a Viewport in the x-windows div (not sure if this is the best way Jack?). So now the start button is in the west panel and the TaskbarItems are in the center panel. More to come.

Foggy. Thanks for the button styling.

[genius551v]

Wow man, really impressive!
tnks for sharing!....

[JeffHowden]

Looks great. Any plans for how to account for when there are more items in the start bar at the bottom than will fit? Right now the Ext desktop example simply expands the height. Your example does not. Thoughts?

[mxracer]

Yeah thats the bad part of using the viewport to make the panels (west, center). Am I correct in thinking the viewport has to be a fixed height according to the CSS?

Haven't got a concrete answer for you.

I was thinking of using code to monitor the items and increase the height of the bar.

Or do like Vista and shrink the buttons down as the number increase, up to a point, and then turn similar buttons (apps) into a single button that opens a menu on click to select the app.

Any ideas yourself? Open to input.

Thanks.....Todd

[cluettr]

Awesome stuff dude... Fantastic menu.

Was going to point of what Jeff mentioned above but figured it's early 2.0 stuff. Also noticed that the responsiveness of the app slowed dramatically with each window I opened. BUT... the menu as I said looks great! Good work!

[mxracer]

Also noticed that the responsiveness of the app slowed dramatically with each window I opened.

I do notice the slowdown in IE 7, not Firefox. But this also happens with the 2.0 desktop demo: http://extjs.com/playpen/ext-2.0/exa...w/desktop.html

Its not because of the start menu.

Remember guys, this is a work in progress