Skip to content
This repository has been archived by the owner on May 4, 2022. It is now read-only.

bug: rc0 Header icons/buttons on left of header bar can't get "activated" class due to swipe to go back change #200

Open
jgw96 opened this issue Jan 24, 2017 · 11 comments

Comments

@jgw96
Copy link
Contributor

jgw96 commented Jan 24, 2017

From @djett41 on March 18, 2015 3:1

Type: bug

Platform: all

When clicking on a button or icon to the left of the screen (x coordinate 45 and under), the activated class never gets added.

In the activator.js file, there is code that will return if the x coordinate is 45 or under. (ionic-team/ionic-framework@8ebde73)

I'm sure theres a reason for this code being added as part of the swipe to go back feature, however this does not give a great UX when clicking buttons/icons on the left side of the screen, especially in the header bar, or in modals

An example of this is in the ionic list demo (http://ionicframework.com/docs/api/directive/ionList/ ). The delete circle in the header will not get "activated" unless you click outside of the circle to the right.

Copied from original issue: ionic-team/ionic-framework#3348

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @mhartington on March 19, 2015 16:36

Can you put a codepen together or where you are seeing this?
I wasn't able to replicate this with the nightly builds

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @djett41 on March 19, 2015 17:9

@mhartington you can replicate it on the ionic codepen /demo for ion-list at http://ionicframework.com/docs/api/directive/ionList/ by clicking on the delete header icon on the left.

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @Fayozjon on March 24, 2015 23:41

Devin

http://medgorodok.org.ua/opcion_rejting

19.03.2015, 20:10, "Devin Jett" notifications@github.com: you can replicate it on the ionic codepen /demo for ion-list at by clicking on the delete header icon on the left.

—Reply to this email directly or .

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @mhartington on March 30, 2015 18:2

should be fixed via 36df508

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @djett41 on March 31, 2015 22:32

@mhartington @perrygovier Thanks for getting to this quick!

I'm curious, what would be the side effect of removing the hitX check completely? While bumping down the check to 30 from 45 looks alot better, any clicks to the left of the icon under 30 still dont get activated of course, which can give off the impression that the click didn't go through. I have even unconsciously double clicked real fast, thinking that i missed the icon.

Since my app uses nested states, I can't really use the swipe to go back feature anyway unless I change my templates all around which is not on my priority list, so I'm debating forking the repo and removing this code to give users a better experience. I would just like to understand what else this may break.

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @mhartington on April 10, 2015 19:34

@adamdbradley would be able to better explain this.

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @Manduro on December 17, 2015 13:17

@adamdbradley Could you please explain the need for this? Still all buttons within 30px of the left side of the screen don't get activated.

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @CrazedCoding on July 24, 2016 10:54

I am having this exact same issue!!!

showLogOutMenu() never gets called...

<body ng-app="app" animation="slide-left-right-ios7">
<ion-side-menus enable-menu-with-back-views="false" data-componentid="side-menu21">
<ion-nav-bar class="bar-dark">
<ion-nav-buttons side="left">
</ion-nav-buttons>
<ion-nav-view></ion-nav-view>
<ion-side-menu side="left" id="side-menu21" style="background-color:#000000;">
<div class="title">Menu</div>
<ion-content padding="false" class="side-menu-left has-header">


<h2 id="menu-heading8" style="color:#FFFFFF;font-weight:600;text-align:center;" class=" " data-componentid="heading8">User Name</h2>

<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>

<ion-item id="menu-button26" type="input" class=" button button-balanced button-block " data-componentid="button26">New Shader</ion-item> Sign Out
<ion-item class="range range-balanced " id="menu-range1" data-componentid="range1">Resolution
</ion-item> Toggle Sound
<button id="button-view-live" class=" preview-button button button-balanced button-block ">View Live URL</button> Get Developer URL
<button id="button-live-link" class=" preview-button button button-balanced button-block ">Get Live URL</button>
</ion-side-menu>
`

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @CrazedCoding on July 24, 2016 11:13

About 36df508: how is decreasing that value supposed to make the side menu any more responsive to my missed inputs (other than putting it to zero / removing it)? I am just getting under the hood of this framework: is there another location in the code that handles inputs for x < 30?

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @dkardanski on October 21, 2016 0:59

@mhartington unfortunately, it was not fixed by 36df508.
Buttons on the left side of the screen don't get active class added when touched. You have to add around 20px left padding for a button for the active class to be added. However, you need buttons on the left without such puddings e.g. back button.

@jgw96
Copy link
Contributor Author

jgw96 commented Jan 24, 2017

From @przemekd on October 21, 2016 8:1

@mhartington Please reopen this issue, we still has the same exact issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant