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

From WebOS Internals
Jump to navigation Jump to search
m (corrected typos)
(added text to change the font color and size for the app launcher)
 
(22 intermediate revisions by 8 users not shown)
Line 1: Line 1:
 
{{template:patch}}
 
{{template:patch}}
−
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.'''
+
[[Image: 5by4Launcher.png|thumb|right]]
 +
'''THIS IS 1.1.0 SAFE, DO NOT TRY IT WITH ANY OTHER WEBOS VERSION'''
  
−
<pre><nowiki>mount -o remount,rw /</nowiki></pre>
+
This patch allows you to have a 20 icon, 5x4 launcher page. It decreases icon size and text size, changes the apps per row, and moves the text closer to the icon. It also modifies where the page indicators and margins are a little.
  
−
'''1. Edit the following file:'''
+
==End Result==
−
/usr/lib/luna/system/luna-applauncher/app/controllers/launcher-assistant.js
 
  
−
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:
+
The thumbnail image on the right shows launcher after the patch is applied.
  
−
<pre><nowiki>
+
==Patch Process==
−
kPageIndicatorSpacing: 6
 
−
</nowiki></pre>
 
  
−
Change the value "6" to whatever you'd like, it is the amount of space between indicators in pixels.
+
If you are not familiar with the Webos-Internals patching process, you'll need to visit the [[Applying Patches|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"'''  ===address forthcoming===
−
I changed mine to 1.
 
  
−
'''2. Still in that same file, you have to find the following code'''
+
This patch also includes the patch to allow a user to add and remove additional launcher pages. You might have to remove that patch before applying this one.
  
−
<pre><nowiki>
+
==Patch Code==
−
kPageMargin: 10
 
−
</nowiki></pre>
 
  
−
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.
+
<pre>
−
I changed mine to 2.
+
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;
 +
}
 +
</pre>
  
−
'''3. Next, find the following code, this will control the apps per row.'''
+
==Multi-line Icon Text==
 +
 +
[[Image: 4pre_row.jpg|thumb|right]]
 +
I noticed that this makes some of the apps with longer names run into each other. I fixed this by going into the stylesheet and modifying
 +
<pre>
 +
.launcher_page .name
 +
left:12px;
 +
width:80px;
 +
</pre>
 +
The values may be different for you, I am using 4 icons per row instead of 5.
  
−
Modify the code to add a new div:
+
'''Suggestion: Can someone provide instructions for a 4x4 icon setup or an NxN setup? I find the 5x4 setup to be too small, and I often misclick on an icon.'''
−
<pre><nowiki>
 
−
this.kAppWidth = newAppDiv.getWidth();
 
−
</nowiki></pre>
 
  
−
Change that line to this:
+
'''Suggestion: Can anyone provide code so that there is a confirmation of the delete page command?  It is really annoying when you accidentally hit 'Delete Page' and there goes the whole page...'''
−
<pre><nowiki>
 
−
this.kAppWidth = 58;
 
−
</nowiki></pre>
 
  
−
This is just the value I found to look best, it puts 5 icons per row in your launcher..
+
For 5 per row you can use:
 +
<pre>
 +
.launcher_page .name
 +
left: 20px;
 +
width: 60px;
 +
</pre>
 +
This looks fairly center and none of the words run over each other.
  
−
'''4. Now go to the following file to edit:'''
+
==Widen space between icons and reduce margins==
−
/usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
 
  
−
Find the following section in the code:
+
[[image: wide_5_row.jpg|thumb|right]]
−
<pre><nowiki>
+
Change <pre>this.kAppWidth = 55;</pre> to <pre>this.kAppWidth = 64;</pre> will widen the space between each icon in the rows. To allow for this extra space and to balance the look of the page the left margin needs to be reduced by changing <pre>left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) + this.kPageMargin),</pre> to <pre>left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) - 18),</pre>
−
.launcher_page .name {
 
−
position:absolute;
 
−
top: 68px;
 
−
    width:100px;
 
−
height: 34px;
 
−
max-height: 34px;
 
−
    clear:both;
 
−
line-height:16px;
 
−
    color:white;
 
−
    text-align:center;
 
−
font-weight:bold;
 
−
    font-size: 14px;
 
−
overflow: hidden;
 
−
text-overflow: ellipsis;
 
−
z-index:5;
 
−
}
 
−
</nowiki></pre>
 
  
−
Change the "font-size" attribute to change what the font size the name of your apps is.
+
==Change the color and font size of app titles in launcher==
−
I changed mine to "9"
 
  
−
'''5. Lastly, in the same file, edit the following code:'''
+
Using Quick Install, I changed the opacity of the launcher to zero so that the app icons just pop up over my background without any page being there. However, this made the white app titles kind of hard to see.  So, I decided to change the color to black.  To do this, I went into the stylesheet mentioned above and modified the color of the font and made it bigger.
  
−
<pre><nowiki>
+
<pre>
−
.draggable {
+
mount -o remount,rw /
−
width:64px;
+
</pre>
−
height:64px;
 
−
margin: 0 auto;
 
−
-webkit-user-drag: any;
 
−
-webkit-user-select: none;
 
−
}
 
−
</nowiki></pre>
 
  
−
Change the "width" and "height", which controls the width/height of the icons.
+
<pre>
 +
vi /usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css
 +
</pre>
  
−
I changed mine to be "48x48"
+
Go to line 141 by typing ":141".
  
−
'''6. Now just restart luna.'''
+
Then, hit "i" to enter edit mode, and then change the color to black so that it looks like:
  
−
<pre><nowiki>
+
<pre>
−
mount -o remount,ro /
+
color: black;
−
pkill LunaSysMgr
+
</pre>
−
</nowiki></pre>
 
  
 +
While there, you can increase the font size.  With the 4x4 app launcher patch applied, the font was set to 11 pixels.  I changed it to 12, which works out except for the longest of app names.  Once done modifying, press "esc" and then type ":wq" to save the file and get back to command line.  Then, to restart Luna:
  
−
Now, here's my end result...
+
<pre>
−
 
+
stop LunaSysMgr && start LunaSysMgr
−
[[Image:Launcher_smaller_icons.png]]
+
</pre>
−
 
 
−
All value's are customizable so make it look how ever you want, I found what I like, hopefully you will too :)
 
−
 
 
−
 
 
−
'''Credits: Me(dhMassacre/Decimation), destinal'''
 

Latest revision as of 00:02, 5 October 2009


Introduction

5by4Launcher.png

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

This patch allows you to have a 20 icon, 5x4 launcher page. It decreases icon size and text size, changes the apps per row, and moves the text closer to the icon. It also modifies where the page indicators and margins are a little.

End Result

The thumbnail image on the right shows launcher after the patch is applied.

Patch Process

If you are not familiar with the Webos-Internals patching process, 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" ===address forthcoming===

This patch also includes the patch to allow a user to add and remove additional launcher pages. You might have to remove that patch before applying this one.

Patch Code

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;
 }

Multi-line Icon Text

4pre row.jpg

I noticed that this makes some of the apps with longer names run into each other. I fixed this by going into the stylesheet and modifying 

.launcher_page .name
left:12px;
width:80px;

The values may be different for you, I am using 4 icons per row instead of 5.

Suggestion: Can someone provide instructions for a 4x4 icon setup or an NxN setup? I find the 5x4 setup to be too small, and I often misclick on an icon.

Suggestion: Can anyone provide code so that there is a confirmation of the delete page command? It is really annoying when you accidentally hit 'Delete Page' and there goes the whole page...

For 5 per row you can use: 

.launcher_page .name
left: 20px;
width: 60px;

This looks fairly center and none of the words run over each other.

Widen space between icons and reduce margins

Wide 5 row.jpg

Change 

this.kAppWidth = 55;

to 

this.kAppWidth = 64;

will widen the space between each icon in the rows. To allow for this extra space and to balance the look of the page the left margin needs to be reduced by changing 

left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) + this.kPageMargin),

to 

left: (((appIndex % this.kAppsPerRow) * this.kAppWidth) - 18),

Change the color and font size of app titles in launcher

Using Quick Install, I changed the opacity of the launcher to zero so that the app icons just pop up over my background without any page being there. However, this made the white app titles kind of hard to see. So, I decided to change the color to black. To do this, I went into the stylesheet mentioned above and modified the color of the font and made it bigger. 

mount -o remount,rw /

vi /usr/lib/luna/system/luna-applauncher/stylesheets/launcher.css

Go to line 141 by typing ":141".

Then, hit "i" to enter edit mode, and then change the color to black so that it looks like: 

color: black;

While there, you can increase the font size. With the 4x4 app launcher patch applied, the font was set to 11 pixels. I changed it to 12, which works out except for the longest of app names. Once done modifying, press "esc" and then type ":wq" to save the file and get back to command line. Then, to restart Luna: 

stop LunaSysMgr && start LunaSysMgr
Retrieved from "http://wiki.webos-internals.org/index.php?title=Patch_Launcher_To_Allow_More_Icons_Per_Row&oldid=6171"