We have moved to a new Sailfish OS Forum. Please start new discussions there.
57

[1.0.4.20] How to fix the new UI changes? [not relevant]

asked 2014-03-17 23:13:47 +0200

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-20 14:49:54 +0200

nodevel gravatar image

I was looking to the new update and I like most of the changes, but one thing has changed for worse: The UI. I was happy with subtleness of Jolla's UI (I was calling it non-invasive when showing it off to others), but this is now partly gone. Here are the main drawbacks:

  • pulley menus are too bold and bright - it hurts my eyes to look at screen where they are present
  • app background is too dark and does not follow the ambiance color as before
  • application covers are too bright - especially in contrast to the dark background. With some ambiances, the conver is so bright that its text is almost unreadable - white on white.
  • cover corners are too sharp and seem quite out of place
  • the keyboard... It was the most beautiful aspect of Sailfish UI, not anymore.

  • the dots, all the dots, on the UI have been overly boldened, I would understand a bit more boldness, but not this much, it's too intrusive

Can we aggregate solutions how to manually revert these changes? (as answers to this question)

edit retag flag offensive reopen delete

The question has been closed for the following reason "question is not relevant or outdated" by molan
close date 2015-08-19 18:06:28.493316

Comments

8

Agree with the app background part. It was better before the update.

Neo ( 2014-03-17 23:17:22 +0200 )edit
3

Indeed. Still no osx support and loud notifications that can damage your ears. It looks like Jolla will focus on ringtones, walpapers and battery covers instead of fixing bugs.

cropas ( 2014-03-17 23:23:31 +0200 )edit
13

What about this "Introduced glass texture background to app covers"? I liked it better before.

Neo ( 2014-03-17 23:43:21 +0200 )edit
1

@Neo Yes I added the comment about brightness and corners. Is that what you mean? Application covers look like the most annoying thing of the new update. It just burns my eyes... And then I realized I already have the brightness on the lowest setting :(

nodevel ( 2014-03-17 23:49:22 +0200 )edit
3

yeah, I was asking before the update already about whether we have a chance to roll back the UI settings. Unfortunately no response. https://together.jolla.com/question/32261/will-some-of-the-cosmetic-ui-improvements-in-for-example-the-upcoming-march-update-be-optionalreversible/

spacenewt ( 2014-03-17 23:55:55 +0200 )edit

6 Answers

Sort by » oldest newest most voted
23

answered 2014-03-17 23:25:51 +0200

Sailor gravatar image

For the app backgrounds being to dark, it was fixed for me after switching to another ambience and back. Afterwards it becomes much brighter for me.

edit flag offensive delete publish link more

Comments

4

Yes, it seems better after switching back and forth. Interesting... Thank you!

nodevel ( 2014-03-17 23:32:03 +0200 )edit

Same here. Change ambience then back again and all is good :)

Mind you..... It was more readable when it was darker... Lol

Has anyone else's operator logo vanished?

Hazy ( 2014-03-17 23:33:42 +0200 )edit

Good one, thanks.

Neo ( 2014-03-17 23:41:04 +0200 )edit

for me it got really dark after switching around....

Whippler ( 2014-03-18 11:12:30 +0200 )edit

Does not work for me. The background is still very dark, even after switching to other ambiences. I also tried to reboot.

szobi ( 2014-03-18 13:10:54 +0200 )edit
11

answered 2014-03-18 04:21:16 +0200

fivepointsquare gravatar image

updated 2014-03-19 09:45:21 +0200

spacenewt gravatar image

Found a 'fix' that seems to work on all pulley menu glows except the lockscreen one. /usr/lib/qt5/qml/Sailfish/Silica/private/MenuIndicator.qml make a backup of this file, just to be safe

Go to the following line height: 2*Theme.paddingLarge

change the 2 to a 1 So it'll now be height: 1*Theme.paddingLarge save & reboot.


For "lockscreen pulley menu glow" you need the old graphic-pulldown-no-shader.png in /usr/share/themes/jolla-ambient/meegotouch/icons to replace the new one (same folder). The new one that came with 1.0.4.20 is twice the size. I believe this is the base file for pulley bar the qml-file controls. The same goes with the cross for closing app if you prefer the old look: graphic-close-app.png.

edit flag offensive delete publish link more

Comments

Great! I'd be nice to see what exactly the original value was before the update.

nodevel ( 2014-03-18 10:08:20 +0200 )edit
1

Still don't have the update and the value is:

height: Theme.paddingLarge

hase5911 ( 2014-03-18 10:30:39 +0200 )edit
5

I made a btrfs snapshot before upgrading :) diff is here: http://pastebin.com/QRpqiTmE Basically: you want

height: Theme.paddingLarge
radius: 0.25
falloffRadius: 0.2
indicator.falloffRadius = 0.17

Read the diff on pastebin if you want to be sure where they go.

DataGhost ( 2014-03-18 11:18:23 +0200 )edit
1

@DataGhost Thank you, it's great to see how the potential of btrfs can be used :) It would be nice to see other diffs, like /usr/lib/qt5/qml/Sailfish/Silica/CoverBackground.qml from the top of my head.

nodevel ( 2014-03-18 11:59:13 +0200 )edit

Oops, I meant falloffRadius: 0.17 in my previous post.

@nodevel: there is no such diff :( http://pastebin.com/8iz2mMjG there is the output of diff -burN (backuppath) /usr/lib/qt5/qml | grep +++, those are all the non-binary files that were changed in /usr/lib/qt5/qml from 1.0.3.8 to 1.0.4.20.

DataGhost ( 2014-03-18 12:11:14 +0200 )edit
8

answered 2014-03-18 10:53:03 +0200

nodevel gravatar image

Here, I will focus on the keyboard:

First, backup all the files you are about to edit. You can also make your custom files and change the files that reference them, so you don't have to repeat the changes after every update.

  • Edit /usr/share/maliit/plugins/com/jolla/CharacterKey.qml and /usr/share/maliit/plugins/com/jolla/PhoneKey.qml as root.

Find the following lines:

font.pixelSize: Theme.fontSizeLarge
color: pressed ? Theme.highlightColor : Theme.primaryColor

And change them to:

font.pixelSize: Theme.fontSizeMedium
color: Theme.highlightColor
  • Now quit the root environment and run following command as user:

systemctl --user restart maliit-server.service

edit flag offensive delete publish link more

Comments

2

In an ideal universe, the contrast in the keyboard would be based on the ambient light sensor. With the old scheme, the keyboard is entirely unreadable in sunlight. With the new, it's kinda too bright indoors...

mornfall ( 2014-03-18 12:55:43 +0200 )edit
3

I appreciate all the efforts to manually revert some changes, but I personally don't want to manually mess with system files, that will probably change on update.

I think a more permanent solution should be found! Maybe DataGhost can compile an rpm with all the important reverted files. Then this rpm could be put on openrepos or something...

dsilveira ( 2014-03-18 19:06:25 +0200 )edit
1

@dsilveira, if a future update is not affecting the files containing reverted codes, I don't think there will be a problem (the content of the files won't change) as system updates only change the files involved. If it does, it probably means there are additional codes or changed codes otherwise. The old codes might then be in conflict with other parts of the system. In this case, a rpm made today will not be the permanent solution at all since the files will then have to be changed and recompiled.

spacenewt ( 2014-03-19 08:14:15 +0200 )edit

@spacenewt: well, come on, first, an rpm will always be a better, less troublesome solution than a manual hack, and secondly, the rpm can contain a script which will only change the files in the proper lines (if they still exist).

If you're good enough to manually hack it, you shouldn't complain about the difficulty of making an rpm

dsilveira ( 2014-03-19 19:59:51 +0200 )edit
1

@dsilveira, I don't think I complained anywhere about the difficulty of making rpms. Just saying it's pretty pointless as you asked for a _permanent_ solution.

spacenewt ( 2014-03-19 20:04:09 +0200 )edit
6

answered 2014-03-18 10:14:17 +0200

nodevel gravatar image

updated 2014-03-18 11:00:56 +0200

I have found a way to improve the cover look (decrease the brightness/get rid of the glass effect). First, backup all the files you are about to edit.

Edit /usr/lib/qt5/qml/Sailfish/Silica/CoverBackground.qml, comment out the following line

color: Theme.rgba(Theme.highlightColor, 0.2)

So it looks like this:

//color: Theme.rgba(Theme.highlightColor, 0.2)

And add a new line afterwards, with the following content:

color: "transparent"

PS: It still looks different than before, but it certainly improves the look and readability of the cover. There is one slight drawback - the bright layer we are making transparent provided some kind of illusion that the cover corners are rounded. Without this layer, you will notice how sharp the corners actually are and it doesn't look good.

edit flag offensive delete publish link more

Comments

Unfortunately, it looks like the Cover {} component is exposed directly through the C++ part of Silica (still closed source), so we might not be able to change the look further (further reduce the glass effect, get rid of sharp corners...).

nodevel ( 2014-03-18 10:23:52 +0200 )edit
1

@nodevel, To get rid of the "glass" background, don't change that qml-file. I just made a new smooth semi-transparent (actually almost transparent) picture to replace this file: graphic-shader-texture.png (same name, same size 16x16 px), and reboot, now I don't have to look at the "fish net" anymore, and the ambience background is coming through almost like before (just have to round the corners more I think). :)

spacenewt ( 2014-03-19 22:24:19 +0200 )edit
3

answered 2014-06-10 02:59:23 +0200

spacenewt gravatar image

updated 2014-06-10 03:02:44 +0200

The "dots" - PageStackIndicator:

/usr/lib/qt5/qml/Sailfish/Silica/private/PageStackIndicator.qml

There are 3 "GlassItem {...}". Go to the last one, almost at the bottom of the file

GlassItem {
            color: backgroundItem.down && !root._dialogAtTop ? Theme.highlightColor : Theme.primaryColor
            anchors.centerIn: parent
            radius: 0.2
            falloffRadius: 0.2
        }

Change both values 0.2 to 0.13 to make the dots smaller and less intrusive as it was before.

edit flag offensive delete publish link more

Comments

Much better, thanks spacenewt

kearnage ( 2014-06-10 10:50:06 +0200 )edit

anytime :)

spacenewt ( 2014-06-10 10:56:32 +0200 )edit

@spacenewt Brilliant... Finally :) Thx for finding and sharing.

J4ZZ ( 2014-06-10 16:12:14 +0200 )edit

:) Been too busy at work and forgot about this for a while. Now still missing the "radio buttons", will post when I find it.

spacenewt ( 2014-06-10 17:33:57 +0200 )edit
2

answered 2014-03-18 01:35:51 +0200

spacenewt gravatar image

updated 2014-06-10 02:50:06 +0200

For getting back the old look: back up files in the following folders from before and after 1.0.4.20 just in case:

usr/share/themes/jolla-ambient/meegotouch/icons/
usr/share/maliit/
usr/lib/qt5/qml/Sailfish/Silica/

I have swapped out these picture files (located at the icons folder) like I mentioned in comments here and there:

Pulley menu bar: Replace graphic-pulldown-no-shader.png with the version before 1.0.4.20-update, because the new one is twice as thick.

App-closing cross: Replace graphic-close-app.png with the version before update.

To remove the "glass-like/mesh-like" app background (including app cover at home screen): Make a new smooth semi-transparent picture to replace this file: graphic-shader-texture.png (same name, same size 16x16 px).

To remove the lock icon for "swipe down from edge to lock the phone": graphic-display-blank.png is the file for the lock icon. I decided to put a real "blank" picture file (again, same name same size) in the folder, kinda like a placeholder. I might make my own version of the lock icon.

Reboot the phone after inserting the new files. NB!! Need root access so be careful!

edit flag offensive delete publish link more

Comments

Now we only need to get the dots to before 1.0.4.20. ;)

J4ZZ ( 2014-03-20 02:57:39 +0200 )edit
1

@J4ZZ, yeah, I still haven't found what I'm looking.... I mean the dots, yet. ;). I think it's in one of the qml files in Silica, not the graphic file.

spacenewt ( 2014-03-20 03:05:01 +0200 )edit

Will be good to put those files somewhere, I am after update.. :)

Kaacz ( 2014-03-20 03:14:43 +0200 )edit

no need .. Pulley Menu bar graphic-pulldown-no-shader.png reduced to 24px in Gimp - fine but only in lock screen. In apps is still ugly fat & bright. Black non-transparent graphic-shader-texture.png is still blurred transparent in apps .. :(

Kaacz ( 2014-03-21 18:39:42 +0200 )edit

@Kaacz, pulley bar size outside of lock screen, see instruction further up here by fivepointsquare. Too bad the black bgr didn't work.

spacenewt ( 2014-03-21 18:58:48 +0200 )edit

Question tools

Follow
16 followers

Stats

Asked: 2014-03-17 23:13:47 +0200

Seen: 3,176 times

Last updated: Jun 10 '14