Gallery.app: make edit button toggleable.

ui/file_manager/gallery/css/gallery.css

Index: ui/file_manager/gallery/css/gallery.css
diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css
index 397b4714d8d1fb5540be26a6fa69d40d2ed79eb0..1e269119ab261becd9c24b5cfc05be82c68db4ee 100644
--- a/ui/file_manager/gallery/css/gallery.css
+++ b/ui/file_manager/gallery/css/gallery.css
@@ -574,7 +574,8 @@ files-toggle-ripple::shadow .ripple.activated {
   visibility: visible;
 }
 
-.gallery > .toolbar paper-button {
+.gallery > .toolbar paper-button,
+.gallery > .toolbar button {
   background-position: center;
   background-repeat: no-repeat;
   height: 32px;
@@ -583,11 +584,33 @@ files-toggle-ripple::shadow .ripple.activated {
   width: 32px;
 }
 
+.gallery > .toolbar button {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  position: relative;
+}
+
+.gallery > .toolbar button > .icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  z-index: 2;
+}
+
+.gallery > .toolbar button > files-toggle-ripple {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
 .gallery > .toolbar paper-button:focus {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
-.gallery > .toolbar paper-button.edit {
+.gallery > .toolbar .button.edit > .icon {

[hirono, 2015/07/27 12:27:59]

Now we have three selectors for buttons here (paper-button, .button, button) and
it is a bit confusing. Can we remove .button class and introduce .toggle for
buttons that can be toggled? After that we can just use paper-button and
button.toggle. WDYT?

[yawano, 2015/07/28 01:58:00]

SGTM. I agree with that current situation is confusing.

The reason that I added .button class is for simplifying selectors in JS side.
If we query element by class name, we don't need to change JS side code when we
change the elements.

But even if we use class name for a selector, we need to know which element it
is in JS side (actually, we change JS side code in this CL).

I'll remove .button class and unify to use element names.

   background-image: -webkit-image-set(
       url(../images/100/edit.png) 1x,
       url(../images/200/edit.png) 2x);
@@ -637,7 +660,8 @@ files-toggle-ripple::shadow .ripple.activated {
 .gallery:not([editing])[mode='slide'] > .toolbar .button.slide-mode,
 .gallery:not([editing])[mode='thumbnail'] > .toolbar .button.thumbnail-mode,
 .gallery[editing][mode='slide'] > .toolbar .button.thumbnail-mode,
-.gallery > .toolbar paper-button[disabled] {
+.gallery > .toolbar paper-button[disabled],
+.gallery > .toolbar button[disabled] {
   display: none;
 }