Difference between revisions of "Patch Launcher To Allow More Icons Per Row"

From WebOS Internals
Jump to navigation Jump to search
m (corrected typos)
Line 1: Line 1:
−
{{template:patch}}
+
'''THIS IS 1.1.0 SAFE, DO NOT TRY IT WITH ANY OTHER WEBOS VERSION'''
−
I'm gonna show you guys how to edit your launcher to customize the icon size, text size, distance between page indicators, and also, most importantly, how to make more than three icons show in each row on the pages of the launcher.
 
  
−
'''NOTE''' If you mess something up while editing, you can totally screw up your icon formatting, so make sure you back up your files in case you don't like the end result.
+
==Introduction==
  
−
'''First things first, enable read/write access so you can edit the files.'''
+
Okay, this patch allows you to have a 5x4 launcher page. It decreases icon size/text size, changes the apps per row, and moves the text closer to the icon.
 +
It also messes with where the page indicators and margins are a little.
  
−
<pre><nowiki>mount -o remount,rw /</nowiki></pre>
+
==Patch==
  
−
'''1. Edit the following file:'''
+
First off, you'll need to visit the * [[Applying Patches|Applying Patches]] section of the wiki to know how to use the patch.
−
/usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
+
After you have set up everything and are ready to download the patch, it is in the modifications repo under "luna/more_icons_per_row.patch"
  
−
To change the space between page indicators (those are the little white lines at the bottom that show you which page you are on) go to this line:
+
Here is the patch:
−
 
+
<pre>
−
<pre><nowiki>
+
Index: /usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
−
kPageIndicatorSpacing: 6
+
===================================================================
−
</nowiki></pre>
+
--- .orig/usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
−
 
+
+++ /usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
−
Change the value "6" to whatever you'd like, it is the amount of space between indicators in pixels.
+
@@ -16,7 +16,7 @@ var LauncherAssistant = Class.create({
−
I changed mine to 1.
+
*/
−
 
+
kBottomFadeHeight: 0,
−
'''2. Still in that same file, you have to find the following code'''
+
−
 
+
- kPageIndicatorSpacing: 6, /* spacing between each page indicator */
−
<pre><nowiki>
+
+ kPageIndicatorSpacing: 1, /* spacing between each page indicator */
−
kPageMargin: 10
+
kPageMargin: 10, /* 10 pixel margin on each side of a page */
−
</nowiki></pre>
+
kTopMargin: 12,
−
 
+
kPageWidthNoMargin: NaN,
−
Edit the value "10" and change it to whatever you want, it really just takes some experimenting to see what looks good, you will probably want to edit this after you change the apps per row setting.
+
@@ -30,8 +30,8 @@ var LauncherAssistant = Class.create({
−
I changed mine to 2.
+
visible: true,
−
 
+
label: $L('Launcher'),
−
'''3. Next, find the following code, this will control the apps per row.'''
+
        items: [
−
 
+
- /*{ label: $L('New page'), command: 'newpage' },
−
Modify the code to add a new div:
+
- { label: $L('Delete page'), command: 'deletepage' },*/
−
<pre><nowiki>
+
+ { label: $L('New page'), command: 'newpage' },
−
this.kAppWidth = newAppDiv.getWidth();
+
+ { label: $L('Delete page'), command: 'deletepage' },
−
</nowiki></pre>
+
Mojo.Menu.editItem,
−
 
+
{ label: $L('List Apps...'), command: 'listapps' },
−
Change that line to this:
+
Mojo.Menu.helpItem
−
<pre><nowiki>
+
@@ -125,7 +125,24 @@ var LauncherAssistant = Class.create({
−
this.kAppWidth = 58;
+
ApplicationService.launch(this.deviceInfo.id, this.deviceInfo.params);
−
</nowiki></pre>
+
break;
−
 
+
/*
−
This is just the value I found to look best, it puts 5 icons per row in your launcher..
+
- case 'newpage':
−
 
+
+ START ENABLE PAGE ADD AND DELETE */
−
'''4. Now go to the following file to edit:'''
+
+                                case 'newpage':
−
/usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
+
+                                        if (this.pageDivs.length < 10) {
−
 
+
+                                                this.insertPage(this.activePageIndex, true);
−
Find the following section in the code:
+
+                                        }
−
<pre><nowiki>
+
+                                        break;
−
.launcher_page .name {
+
+                                case 'deletepage':
−
position:absolute;
+
+                                        if (this.pageDivs.length > 1) {
−
top: 68px;
+
+                                                this.deletePage(this.activePageIndex);
−
    width:100px;
+
+                                                if (this.activePageIndex >= this.pageDivs.length) {
−
height: 34px;
+
+                                                        this.activePageIndex = this.pageDivs.length - 1;
−
max-height: 34px;
+
+                                                }
−
    clear:both;
+
+                                        }
−
line-height:16px;
+
+                                        break;
−
    color:white;
+
+                                /*
−
    text-align:center;
+
+                                END ENABLE PAGE ADD AND DELETE
−
font-weight:bold;
+
+
−
    font-size: 14px;
+
+                                case 'newpage':
−
overflow: hidden;
+
if (this.pageDivs.length < 10) {
−
text-overflow: ellipsis;
+
this.insertPage(this.activePageIndex, true);
−
z-index:5;
+
}
−
}
+
@@ -382,9 +399,9 @@ var LauncherAssistant = Class.create({
−
</nowiki></pre>
+
var newAppDiv = $(newAppInfo.launchPointId);
−
 
+
Mojo.assert(newAppDiv !== undefined, "Application (%d) was inserted into the DOM but unable to be retrieved!", newAppInfo.launchPointId);
−
Change the "font-size" attribute to change what the font size the name of your apps is.
+
if (isNaN(this.kAppWidth) || isNaN(this.kAppHeight)) {
−
I changed mine to "9"
+
- this.kAppWidth = newAppDiv.getWidth();
−
 
+
- this.kAppHeight = newAppDiv.getHeight();
−
'''5. Lastly, in the same file, edit the following code:'''
+
- this.kAppsPerRow = Math.round(this.kPageWidthNoMargin / this.kAppWidth);
−
 
+
+ this.kAppWidth = 55;
−
<pre><nowiki>
+
+ this.kAppHeight = 90;
−
.draggable {
+
+ this.kAppsPerRow = 5;
−
width:64px;
+
}
−
height:64px;
+
−
margin: 0 auto;
+
Mojo.listen(newAppDiv, Mojo.Event.tap, this.onAppTapped.bindAsEventListener(this));
−
-webkit-user-drag: any;
+
@@ -498,7 +515,7 @@ var LauncherAssistant = Class.create({
−
-webkit-user-select: none;
+
/* determines the position of an app element at appIndex within a page */
−
}
+
calculateAppPosition: function(appIndex) {
−
</nowiki></pre>
+
return {
−
 
+
- left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) + this.kPageMargin),
−
Change the "width" and "height", which controls the width/height of the icons.
+
+ left: (((appIndex % this.kAppsPerRow) * this.kAppWidth)),
−
 
+
top: (Math.floor(appIndex/this.kAppsPerRow) * this.kAppHeight + this.kTopMargin)
−
I changed mine to be "48x48"
+
};
−
 
+
},
−
'''6. Now just restart luna.'''
+
Index: /usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
−
 
+
===================================================================
−
<pre><nowiki>
+
--- .orig/usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
−
mount -o remount,ro /
+
+++ /usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
−
pkill LunaSysMgr
+
@@ -116,7 +116,7 @@ body.palm-default
−
</nowiki></pre>
+
−
 
+
.launcher_page .name {
−
 
+
position:absolute;
−
Now, here's my end result...
+
- top: 68px;
−
 
+
+ top: 48px;
−
[[Image:Launcher_smaller_icons.png]]
+
    width:100px;
−
 
+
height: 34px;
−
All value's are customizable so make it look how ever you want, I found what I like, hopefully you will too :)
+
max-height: 34px;
−
 
+
@@ -125,7 +125,7 @@ body.palm-default
−
 
+
    color:white;
−
'''Credits: Me(dhMassacre/Decimation), destinal'''
+
    text-align:center;
 +
font-weight:bold;
 +
-    font-size: 14px;
 +
+    font-size: 9px;
 +
overflow: hidden;
 +
text-overflow: ellipsis;
 +
z-index:5;
 +
@@ -148,8 +148,8 @@ body.palm-default
 +
}
 +
 +
.draggable {
 +
- width:64px;
 +
- height:64px;
 +
+ width:48px;
 +
+ height:48px;
 +
margin: 0 auto;
 +
-webkit-user-drag: any;
 +
-webkit-user-select: none;
 +
@@ -192,8 +192,8 @@ body.palm-default
 +
 +
#app-icon {
 +
float:left;
 +
- width:64px;
 +
- height:64px;
 +
+ width:32px;
 +
+ height:32px;
 +
background: center center no-repeat;
 +
}
 +
</pre>

Revision as of 03:34, 12 August 2009

THIS IS 1.1.0 SAFE, DO NOT TRY IT WITH ANY OTHER WEBOS VERSION

Introduction

Okay, this patch allows you to have a 5x4 launcher page. It decreases icon size/text size, changes the apps per row, and moves the text closer to the icon. It also messes with where the page indicators and margins are a little.

Patch

First off, you'll need to visit the * Applying Patches section of the wiki to know how to use the patch. After you have set up everything and are ready to download the patch, it is in the modifications repo under "luna/more_icons_per_row.patch"

Here is the patch: 

Index: /usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
===================================================================
--- .orig/usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
+++ /usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
@@ -16,7 +16,7 @@ var LauncherAssistant = Class.create({
 	 */
 	kBottomFadeHeight: 0,
 	
-	kPageIndicatorSpacing: 6, 	/* spacing between each page indicator */
+	kPageIndicatorSpacing: 1, 	/* spacing between each page indicator */
 	kPageMargin: 10, /* 10 pixel margin on each side of a page */
 	kTopMargin: 12,
 	kPageWidthNoMargin: NaN,
@@ -30,8 +30,8 @@ var LauncherAssistant = Class.create({
 		visible: true,
 		label: $L('Launcher'),
         items: [
-			/*{ label: $L('New page'), command: 'newpage' },
-			{ label: $L('Delete page'), command: 'deletepage' },*/
+			{ label: $L('New page'), command: 'newpage' },
+			{ label: $L('Delete page'), command: 'deletepage' },
 			Mojo.Menu.editItem,
 			{ label: $L('List Apps...'), command: 'listapps' },
 			Mojo.Menu.helpItem
@@ -125,7 +125,24 @@ var LauncherAssistant = Class.create({
 					ApplicationService.launch(this.deviceInfo.id, this.deviceInfo.params);
 					break;
 				/*
-				case 'newpage':
+				START ENABLE PAGE ADD AND DELETE */
+                                case 'newpage':
+                                        if (this.pageDivs.length < 10) {
+                                                this.insertPage(this.activePageIndex, true);
+                                        }
+                                        break;
+                                case 'deletepage':
+                                        if (this.pageDivs.length > 1) {
+                                                this.deletePage(this.activePageIndex);
+                                                if (this.activePageIndex >= this.pageDivs.length) {
+                                                        this.activePageIndex = this.pageDivs.length - 1;
+                                                }
+                                        }
+                                        break;
+                                /*
+                                END ENABLE PAGE ADD AND DELETE
+
+                                case 'newpage':
 					if (this.pageDivs.length < 10) {
 						this.insertPage(this.activePageIndex, true);
 					}
@@ -382,9 +399,9 @@ var LauncherAssistant = Class.create({
 		var newAppDiv = $(newAppInfo.launchPointId);
 		Mojo.assert(newAppDiv !== undefined, "Application (%d) was inserted into the DOM but unable to be retrieved!", newAppInfo.launchPointId);
 		if (isNaN(this.kAppWidth) || isNaN(this.kAppHeight)) {
-			this.kAppWidth = newAppDiv.getWidth();
-			this.kAppHeight = newAppDiv.getHeight();
-			this.kAppsPerRow = Math.round(this.kPageWidthNoMargin / this.kAppWidth);
+			this.kAppWidth = 55;
+			this.kAppHeight = 90;
+			this.kAppsPerRow = 5;
 		}
 		
 		Mojo.listen(newAppDiv, Mojo.Event.tap, this.onAppTapped.bindAsEventListener(this));
@@ -498,7 +515,7 @@ var LauncherAssistant = Class.create({
 	/* determines the position of an app element at appIndex within a page */
 	calculateAppPosition: function(appIndex) {
 		return {
-			left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) + this.kPageMargin),
+			left: (((appIndex % this.kAppsPerRow) * this.kAppWidth)),
 			top: (Math.floor(appIndex/this.kAppsPerRow) * this.kAppHeight + this.kTopMargin)
 		};
 	},
Index: /usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
===================================================================
--- .orig/usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
+++ /usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
@@ -116,7 +116,7 @@ body.palm-default
 
 .launcher_page .name {	
 	position:absolute;
-	top: 68px;
+	top: 48px;
     width:100px;
 	height: 34px;
 	max-height: 34px;
@@ -125,7 +125,7 @@ body.palm-default
     color:white;
     text-align:center;
 	font-weight:bold;
-    font-size: 14px;	
+    font-size: 9px;	
 	overflow: hidden;
 	text-overflow: ellipsis;
 	z-index:5;
@@ -148,8 +148,8 @@ body.palm-default
 }
 
 .draggable {
-	width:64px;
-	height:64px;
+	width:48px;
+	height:48px;
 	margin: 0 auto;
 	-webkit-user-drag: any;
 	-webkit-user-select: none;
@@ -192,8 +192,8 @@ body.palm-default
 
 #app-icon {
 	float:left;
-	width:64px;
-	height:64px;
+	width:32px;
+	height:32px;
 	background: center center no-repeat;
 }
Retrieved from "http://wiki.webos-internals.org/index.php?title=Patch_Launcher_To_Allow_More_Icons_Per_Row&oldid=4229"