Mobile Patch [Outdated] #240

0ip · 2011-11-26T16:26:50Z

This patch modifies ep-lite as shown in the pictures below, in order to get full mobile support.
Tested on iOS 3, Android (SDK) 2.3 and 4.0. See Comparison
Note Modified Icons not included.

…file.

0ip · 2011-11-26T16:48:31Z

wider buttons
flexible dialogs

markreg · 2011-11-26T17:48:54Z

Is there something for IOS on the iPhone? :D This is exciting.

0ip · 2011-11-26T17:59:33Z

Thanks.
Even my old iPod touch 1G (iOS 3.1) displays it almost* correct. So, it will look the same as on Android or even better on modern iPhones. :)

* rounded corners, gradients

Pita · 2011-11-27T19:27:40Z

Maybe we should remove the bar at the bottom(and all the buttons on it) + chat. They take to much space imho

Pita · 2011-11-27T19:27:48Z

//cc @johnyma22

JohnMcLear · 2011-11-27T19:32:21Z

0ip still working on this FYI, we decided to group buttons etc.

markreg · 2011-11-28T16:36:38Z

For some reason I can't get my iPhone to type in the mobile etherpad-lite.

0ip · 2011-11-28T16:41:08Z

Are you sure that you're either on "pad.factor.cc" or "factor.cc/pad" ?
Atm, only I have this patch applied.

markreg · 2011-11-28T16:48:54Z

Yeah, I'm on pad.factor.cc and when I create a new pad I can highlight and cut/delete the existing text but the iPhone's keyboard is not invoked to allow me to actually type into the pad. i suspect this has to do with the crappy MobileSafari support for the pad. I'm on ios 4.3.3. I think Apple made quite a few changes to MobileSafari in ios 5 that increases support for many commonplace HTML 5 standards.

JohnMcLear · 2011-11-28T16:52:07Z

Yes you need to have the latest iOS version. iOS5+

-----Original Message-----
From: markreg [mailto:[email protected]]
Sent: 28 November 2011 16:49
To: John McLear
Subject: Re: [etherpad-lite] Mobile Patch (#240)

Yeah, I'm on pad.factor.cc and when I create a new pad I can highlight and cut/delete the existing text but the iPhone's keyboard is not invoked to allow me to actually type into the pad. i suspect this has to do with the crappy MobileSafari support for the pad. I'm on ios 4.3.3. I think Apple made quite a few changes to MobileSafari in ios 5 that increases support for many commonplace HTML 5 standards.

Reply to this email directly or view it on GitHub:
https://github.com/Pita/etherpad-lite/pull/240#issuecomment-2901038
This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

markreg · 2011-11-28T17:42:27Z

This seems interesting for possibly solving this problem: http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-JavaScript-how-can-I-launch-the-on-screen-keyboard

PS: I'm typing into github through MobileSafari.

0ip · 2011-11-28T17:47:08Z

Yeah, GitHub uses inputs or textfields. Every phone can type through these elements.
But synchronisation using these wouldn't be possible. That's why ep-lite uses something like editable <div>s. And that's not widely supported.

markreg · 2011-11-28T18:05:18Z

I see. Well, I guess I'll have to upgrade to ios 5 soon then. Waiting for the jailbreak for now...

0ip · 2011-11-28T18:13:52Z

By the way: would you change something on the layout? E.g. hide some buttons, ...?

markreg · 2011-11-29T02:39:54Z

Ok so after further testing with the pad on pad.factor.cc I have found some problems with it on ios 4.3.3 which may be common to ios 5 as well. Also I have some recommendations as to which buttons' positions should be changed and some buttons which should be removed altogether.

Problems observed on ios 4.3.3 MobileSafari:

Switching from portrait to landscape mode causes the pad and buttons to permanently misalign and render the pad not usable including all popup overlays from embed, import/export, people and chat.
The chat window's size and button needs to be decreased.
The embed popup covers the embed toggle button. Maybe a separate ios menu should be made thay simply shows an option select list within the ios gui? Also the upload/import file buttons are extraneous for ios since you can't upload documents...unless you can somehow activate them for people that are on jailbroken iPhones and can navigate through the root of their phone.

In another note there is a bug with the ios keyboard not closing after clicking on the embed toggle button to close the embed popup box. This ties in to problem 6.

Make row number column on left somewhat smaller to maximize text area.
I'm not sure if this has been discussed already but the eye button doesn't really seem to do anything. Maybe it should be removed?
I think that all the popup boxes should have "X's" to close the popup without having to click the toggle button in ios. I think it would make it easier to to close the popups on such a small screen in the first place.

I think the button sizes are good and would be difficult to press if they were made smaller without zooming in.

Feature request:

When I click on the embed button would it be possible to select the wholr link by clicking anywhere within the link and then automatically copy it? Kind of like how github's git links get highlighted with one click but with tw added function of auto copy. That would save a couple of "select all/copy" button presses.

The main problem is when the phone rotates...things really get messed up then.

JohnMcLear · 2011-11-29T02:55:35Z

eye has already been removed

-----Original Message-----
From: markreg [mailto:[email protected]]
Sent: 29 November 2011 02:40
To: John McLear
Subject: Re: [etherpad-lite] Mobile Patch (#240)

Ok so after further testing with the pad on pad.factor.cc I have found some problems with it on ios 4.3.3 which may be common to ios 5 as well. Also I have some recommendations as to which buttons' positions should be changed and some buttons which should be removed altogether.

Problems observed on ios 4.3.3 MobileSafari:

Switching from portrait to landscape mode causes the pad and buttons to permanently misalign and render the pad not usable including all popup overlays from embed, import/export, people and chat.
The chat window's size and button needs to be decreased.
The embed popup covers the embed toggle button. Maybe a separate ios menu should be made thay simply shows an option select list within the ios gui? Also the upload/import file buttons are extraneous for ios since you can't upload documents...unless you can somehow activate them for people that are on jailbroken iPhones and can navigate through the root of their phone.

In another note there is a bug with the ios keyboard not closing after clicking on the embed toggle button to close the embed popup box. This ties in to problem 6.

Make row number column on left somewhat smaller to maximize text area.
I'm not sure if this has been discussed already but the eye button doesn't really seem to do anything. Maybe it should be removed?
I think that all the popup boxes should have "X's" to close the popup without having to click the toggle button in ios. I think it would make it easier to to close the popups on such a small screen in the first place.

I think the button sizes are good and would be difficult to press if they were made smaller without zooming in.

Feature request:

When I click on the embed button would it be possible to select the wholr link by clicking anywhere within the link and then automatically copy it? Kind of like how github's git links get highlighted with one click but with tw added function of auto copy. That would save a couple of "select all/copy" button presses.

The main problem is when the phone rotates...things really get messed up then.

Reply to this email directly or view it on GitHub:
https://github.com/Pita/etherpad-lite/pull/240#issuecomment-2911296
This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

markreg · 2011-11-29T03:37:51Z

I guess OP needs to update from this repo again and additional patches to that to show recent changes. I was looking at pad.factor.cc...

0ip · 2011-11-29T21:29:07Z

@markreg

Can you post a screenshot how it looks?
Same as 1), but I'm not going to make specific changes for iOS - Android users can upload afaik (-1 for Apple)
That's dynamic to fit the length of the line number. (eg. line 13895)
This requires additional pixels and therefor isn't really necessary.

markreg · 2011-11-30T21:06:34Z

@0ip

Will post screenshots soon.

I came across this JS framework which may be of particular interest to you and is extremely relevant to the topic at hand:

http://www.lungojs.com/

Take a look and see if this makes it easier to fix some of the orientation problems and possibly do more on Android and IOS and etherpad-lite.

markreg · 2011-12-02T17:35:39Z

Here are the images from MobileSafari on my iPhone 4 running 4.3.3:

-> Initial load of new pad in vertical orientation (1) and immediate change to horizontal orientation (2).

(1)

(2)

-> Zoom out from horizontal orientation (3) and immediate scroll down (4).

(3)

(4)

Scroll up and open chat box (5) and immediately change orientation then zoom out (6).

(5)

(6)

-> Immediately scroll right (7).

(7)

Also i want to mention again that lungojs looks like a good avenue to solve all these problems having to do with orientation and specifically working with the ios and android mobile platforms.

0ip · 2011-12-02T18:13:05Z

sigh

Android doesn't even allow you to scroll.
It also breaks text correctly after you have rotated your display.

LungoJS looks good btw, but imho it's not appropriate for ep-l.
It's way too heavy and adds in addition more unnecessary code.

markreg · 2011-12-02T18:40:54Z

Here are some more images with the embed and import/export popup overlay boxes open:

Also the document export gives an error on the iPhone for some reason.

0ip · 2011-12-02T21:21:24Z

This misalignment (QR-code) has been fixed. 👍

Also the document export gives an error on the iPhone for some reason.

Can you try it again and name the error message?

markreg · 2011-12-03T00:00:13Z

QR code is still misaligned and very big. I think embed, and import/export option popups need to be downsized a lot in order to fit on the screen and leave plenty of room to click on the embed or import/export button again to close the popup. Furthermore, I hope you would agree that having any other options besides plain text, microsoft word, opendocument, and pdf are irrelevant and should be removed.

Also have you managed to fix the orientation and alignment issues with the pad and toolbars on ios?

JohnMcLear · 2011-12-03T00:08:47Z

If we were to remove options they need to be re-renabled with an option and a parameter

-----Original Message-----
From: markreg [mailto:[email protected]]
Sent: 03 December 2011 00:00
To: John McLear
Subject: Re: [etherpad-lite] Mobile Patch (#240)

QR code is still misaligned and very big. I think embed, and import/export option popups need to be downsized a lot in order to fit on the screen and leave plenty of room to click on the embed or import/export button again to close the popup. Furthermore, I hope you would agree that having any other options besides plain text, microsoft word, opendocument, and pdf are irrelevant and should be removed.

Reply to this email directly or view it on GitHub:
https://github.com/Pita/etherpad-lite/pull/240#issuecomment-2997650
This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

markreg · 2011-12-03T00:17:27Z

Word document export on iPhone 4 4.3.3 MobileSafari says:

JohnMcLear · 2011-12-03T00:23:17Z

And on a Windows Mobile device?

-----Original Message-----
From: markreg [mailto:[email protected]]
Sent: 03 December 2011 00:17
To: John McLear
Subject: Re: [etherpad-lite] Mobile Patch (#240)

Word document export on iPhone 4 4.3.3 MobileSafari says:

Reply to this email directly or view it on GitHub:
https://github.com/Pita/etherpad-lite/pull/240#issuecomment-2997796
This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

0ip · 2011-12-03T00:29:05Z

QR code is still misaligned and very big.

Not possible ;) Try to empty your cache and open a new pad.

Word document export [...] gives an error

Another weird bug...

markreg · 2011-12-03T03:20:24Z

ok QR code is not misaligned after clearning my cache and respringing. But my problem still lies with not being able to close the embed or the import/export popup boxes when they are opened because they cover the original button?? How am I supposed to close them? And what is the point of the QR code on mobile devices anyway?

Are there api options to disable/enable the showing of the QR code? Are there api options to remove options from the export menu?

0ip · 2011-12-03T11:11:54Z

@johnyma22 qr-code yes or no?

@markreg
Atm there are no options to disable ui elements.
You're right. I'll make those dropdowns fullscreen and add close buttons.

JohnMcLear · 2011-12-03T15:28:03Z

So I'm working on a pad, and my buddy sat next to me wants to join the pad, he simply scans the QR code from my mobile device and hes on the same pad. That's the point of the QR Code on mobile devices.

There are currently no APi options to ensable/disable the QR code, this can be put it in as a feature request and passed via a parameter. Happy to do that tomorrow for you. Same applies for the options from the export menu. Please be as verbose as possible in the feature request.

Thanks

-----Original Message-----
From: markreg [mailto:[email protected]]
Sent: 03 December 2011 03:20
To: John McLear
Subject: Re: [etherpad-lite] Mobile Patch (#240)

ok QR code is no misaligned after clearning my cache and respringing. But my problem still lies with not being able to close the embed or the import/export popup boxes when they are opened because they cover the original button?? How am I supposed to close them? And what is the point of the QR code on mobile devices anyway?

Are there api options to disable/enable the showing of the QR code? Are there api options to remove options from the export menu?

Reply to this email directly or view it on GitHub:
https://github.com/Pita/etherpad-lite/pull/240#issuecomment-2998804
This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

markreg · 2011-12-03T21:05:07Z

@0ip

The device orientation is still partly messed up (I can post screenshots if you want). Also (I didn't see it in the revisions) but did you add the close buttons on the popups yet?

@johnyma22 @0ip

Yeah I understand the need for the QR code. I guess I was mainly a bit overwhelmed by the size of the code box on my phone that I started to wonder when I would ever use it in the first place.

I have submitted a joint feature request for the enable/disable QR code and export/import options.

Also going back to a request I had earlier: Can you change the behavior of the share link and embed link to automatically select the whole link on a single click from any point on the link. And maybe even automatically copy the link to the user's clipboard too? Should I put this in as a separate request or should I just post it here because I really want the share and embed links to work this way on my mobile device and computer.

Thanks.

markreg · 2011-12-03T21:08:48Z

@0ip @johnyma22

I'm not sure if any of you guys agree with this but the timeslider icon in the mobile device doesn't really integrate seamlessly within the entire mobile framework. I mean it redirects to a full size page and then it just becomes difficult to use on a mobile screen since you have to zoom in a lot to press the buttons and interact with it. Maybe this should be taken out all together for practicality reasons?

Also is there an option or parameter that I don;t know about which disables the clock icon for the timeslider within the pad anyways? (mobile or non-mobile)

Pita · 2011-12-03T21:27:36Z

imho all buttons on the bottom panel are useless on a mobile

markreg · 2011-12-03T22:15:54Z

@Pita

Yeah, I agree with you.

@0ip @johnyma22

Is there any way that the "clear authorship colors" button can be removed when the noColors=true parameter is passed int he url on mobile and non-mobile? IMHO there need to be api calls or at least parameters that can remove all buttons within the mobile/non-mobile interface on-demand when creating the pad.

Also I think that the left bar with the colomn numbers is too wide and takes up more space than it needs to.

0ip · 2011-12-03T22:58:40Z

@markreg
Like I said (https://github.com/Pita/etherpad-lite/pull/240#issuecomment-2949581):
These line numbers are dynamic and can't have a fixed width.

0ip · 2011-12-03T23:04:15Z

@johnyma22 vs. @Pita & @markreg :)

And now?

If we remove that bottom bar, what happens with the user button?
Squeezing it in the top bar is not a good idea.

John said: [...] he simply scans the QR code from my mobile device and hes on the same pad

Yeah - it's a nice function. But same problem as mentioned above.

markreg · 2011-12-04T00:29:39Z

I hope we're referring to the same width that I've put a red rectangular outline around...right?

0ip · 2011-12-04T13:20:43Z

Yep

Generate some text (http://www.loremipsum.de/index_e.html) and copy/paste it in the pad.
See what happens with the numbers on the left...

Do you think a 4/5 digit line number would fit into a 5px wide bar?

I quote John: "It's a small fish..." ;)

JohnMcLear · 2011-12-04T13:50:47Z

Yes, please create a separate feature request for that.

-----Original Message-----
From: markreg [mailto:[email protected]]
Sent: 03 December 2011 22:16
To: John McLear
Subject: Re: [etherpad-lite] Mobile Patch (#240)

@Pita

Yeah, I agree with you.

@0ip @johnyma22

Is there any way that the "clear authorship colors" button can be removed when the noColors=true parameter is passed int he url on mobile and non-mobile?

Reply to this email directly or view it on GitHub:
https://github.com/Pita/etherpad-lite/pull/240#issuecomment-3003469
This email and its attachments may be confidential and are intended solely for the use of the individual to whom it is addressed. Any views or opinions expressed are solely those of the author and do not necessarily represent those of the organisation from which this email originated. If you are not the intended recipient of this email and its attachments, you must take no action based upon them, nor must you copy or show them to anyone. Please contact the sender if you believe you have received this email in error. This email was sent by School Email - Safe Webmail and Hosted Email for Schools

0ip · 2011-12-06T17:42:16Z

See new pull req.

@ruyadorno

This upgrade solves the high-severity vulnerabilities regarding https-proxy-agent that were still present in 8e6bca4. The output of `npm audit` goes from this: found 29 vulnerabilities (3 low, 26 high) in 13338 scanned packages run `npm audit fix` to fix 4 of them. 1 vulnerability requires semver-major dependency updates. 24 vulnerabilities require manual review. See the full report for details. To this: found 5 vulnerabilities (3 low, 2 high) in 13338 scanned packages 1 vulnerability requires semver-major dependency updates. 4 vulnerabilities require manual review. See the full report for details. Changelog: - https://github.com/npm/cli/releases 6.13.1 (2019-11-18) BUG FIXES 938d6124d #472 fix(fund): support funding string shorthand (@ruyadorno) b49c5535b #471 should not publish tap-snapshot folder (@ruyadorno) 3471d5200 #253 Add preliminary WSL support for npm and npx (@infinnie) 3ef295f23 #486 print quick audit report for human output (@isaacs) TESTING dbbf977ac #278 added workflow to trigger and run benchmarks (@mikemimik) b4f5e3825 #457 feat(docs): adding tests and updating docs to reflect changes in registry teams API. (@nomadtechie) 454c7dd60 #456 fix git configs for git 2.23 and above (@isaacs) DEPENDENCIES 661d86cd2 [email protected] (@claudiahdz) 6.13.0 (2019-11-05) NEW FEATURES 4414b06d9 #273 add fund command (@ruyadorno) BUG FIXES e4455409f #281 delete ps1 files on package removal (@NoDocCat) cd14d4701 #279 update supported node list to remove v6.0, v6.1, v9.0 - v9.2 (@ljharb) DEPENDENCIES a37296b20 [email protected] d3cb3abe8 [email protected] TESTING 688cd97be #272 use github actions for CI (@JasonEtco) 9a2d8af84 #240 Clean up some flakiness and inconsistency (@isaacs)

0ip added 4 commits November 26, 2011 17:22

Optimized start page for mobile devices

c27c219

Optimized pad for mobile devices.

953e781

Removed unnecessary whiteline and a link to a mysterious minified.js …

46a76cc

…file.

Made buttons a bit wider.

78bdd99

mhm

7ccfb37

Switched bars

b8e83b3

0ip added 5 commits December 3, 2011 13:35

Prevent displacements related to the device orientation

6763395

Set width to device-width

520b334

fullscreen menu's + smaller qr code

6f31d43

semi-fullscreen menus

05d7f09

fix for disappearing toolbar @ android 4

1ec1cda

0ip closed this Dec 6, 2011

Mobile Patch [Outdated] #240

Mobile Patch [Outdated] #240

Conversation

0ip commented Nov 26, 2011

0ip commented Nov 26, 2011

markreg commented Nov 26, 2011

0ip commented Nov 26, 2011

Pita commented Nov 27, 2011

Pita commented Nov 27, 2011

JohnMcLear commented Nov 27, 2011

markreg commented Nov 28, 2011

0ip commented Nov 28, 2011

markreg commented Nov 28, 2011

JohnMcLear commented Nov 28, 2011

markreg commented Nov 28, 2011

0ip commented Nov 28, 2011

markreg commented Nov 28, 2011

0ip commented Nov 28, 2011

markreg commented Nov 29, 2011

JohnMcLear commented Nov 29, 2011

markreg commented Nov 29, 2011

0ip commented Nov 29, 2011

markreg commented Nov 30, 2011

markreg commented Dec 2, 2011

-> Initial load of new pad in vertical orientation (1) and immediate change to horizontal orientation (2).

-> Zoom out from horizontal orientation (3) and immediate scroll down (4).

Scroll up and open chat box (5) and immediately change orientation then zoom out (6).

-> Immediately scroll right (7).

0ip commented Dec 2, 2011

markreg commented Dec 2, 2011

0ip commented Dec 2, 2011

markreg commented Dec 3, 2011

JohnMcLear commented Dec 3, 2011

markreg commented Dec 3, 2011

JohnMcLear commented Dec 3, 2011

0ip commented Dec 3, 2011

markreg commented Dec 3, 2011

0ip commented Dec 3, 2011

JohnMcLear commented Dec 3, 2011

markreg commented Dec 3, 2011

markreg commented Dec 3, 2011

Pita commented Dec 3, 2011

markreg commented Dec 3, 2011

0ip commented Dec 3, 2011

0ip commented Dec 3, 2011

markreg commented Dec 4, 2011

0ip commented Dec 4, 2011

JohnMcLear commented Dec 4, 2011

0ip commented Dec 6, 2011