Move overwrite original checkbox and saved label to bottom toolbar.

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 b1ff62be0efc53643f8fa112d3c95ae97a93ffc9..c10864bf1898943d49c180a4fcb931271a2b808f 100644
--- a/ui/file_manager/gallery/css/gallery.css
+++ b/ui/file_manager/gallery/css/gallery.css
@@ -156,7 +156,6 @@ input[type='checkbox']:checked {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
-  background-color: rgba(30, 30, 30, 0.8);
   display: flex;
   left: 0;
   opacity: 0;
@@ -171,12 +170,17 @@ input[type='checkbox']:checked {
   -webkit-app-region: drag;
   -webkit-box-align: center;
   -webkit-box-pack: end;
+  background-color: rgba(30, 30, 30, 0.8);
   border-bottom: 1px solid rgba(50, 50, 50, 0.8);
   display: -webkit-box;
   height: 45px;
   top: 0;
 }
 
+.gallery > .toolbar {
+  background-color: rgba(40, 42, 45, 0.9);
+}
+
 .gallery .header button {
   -webkit-app-region: no-drag;
 }
@@ -195,6 +199,32 @@ input[type='checkbox']:checked {
   bottom: 0;
 }
 
+.gallery > .toolbar.bottom > .slide-mode-toolbar {
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  visibility: visible;
+  width: 100%;
+}
+
+.gallery > .toolbar.bottom > .edit-mode-toolbar {
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  visibility: hidden;
+  width: 100%;
+}
+
+.gallery[editing] > .toolbar.bottom > .slide-mode-toolbar {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.gallery[editing] > .toolbar.bottom > .edit-mode-toolbar {
+  opacity: 1;
+  visibility: visible;
+}
+
 .gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
   opacity: 1;
@@ -332,11 +362,6 @@ input[type='checkbox']:checked {
   width: 100%;
 }
 
-.gallery[editing] .filename-spacer .namebox {
-  height: 21px;
-  top: 5px;
-}
-
 .gallery .filename-spacer .namebox[disabled] {
   -webkit-user-select: none;
   cursor: default;
@@ -352,62 +377,6 @@ input[type='checkbox']:checked {
   cursor: text;
 }
 
-.gallery .filename-spacer .options {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: start;
-  display: -webkit-box;
-  height: 0;
-  opacity: 0;
-  top: 50px;
-  visibility: hidden;
-}
-
-.gallery[editing] .filename-spacer .options {
-  height: auto;
-  opacity: 1;
-  top: 28px;
-  visibility: visible;
-}
-
-.gallery .filename-spacer .saved,
-.gallery .filename-spacer .overwrite-original {
-  cursor: inherit;
-  font-size: 90%;
-  margin-left: 3px;
-  margin-right: 18px;
-  opacity: 0;
-  pointer-events: none;
-  transition: all linear 120ms;
-}
-
-.gallery[editing] .filename-spacer .saved {
-  color: white;
-  opacity: 0.5;
-}
-
-.gallery[editing] .filename-spacer .overwrite-original,
-.gallery[editing] .filename-spacer .overwrite-original > * {
-  cursor: pointer;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.gallery[editing] .overwrite-original[disabled] {
-  opacity: 0.5;
-}
-
-.gallery[editing] .overwrite-original[disabled],
-.gallery[editing] .overwrite-original[disabled] > * {
-  cursor: default;
-  pointer-events: none;
-}
-
-.gallery .filename-spacer .saved[highlighted] {
-  transform: scaleX(1.1) scaleY(1.1) rotate(0);
-  opacity: 1;
-}
-
 /* Bubble */
 
 .gallery .toolbar .bubble {
@@ -434,6 +403,7 @@ input[type='checkbox']:checked {
 /* Toolbar buttons */
 
 .gallery .button-spacer {
+  align-items: center;
   display: flex;
   flex: none;
   justify-content: flex-end;
@@ -444,11 +414,11 @@ input[type='checkbox']:checked {
 
 .gallery .ribbon-spacer {
   height: 55px;
-  margin-bottom: -55px;
 }
 
 .gallery .toolbar .ribbon {
   height: 100%;
+  margin: 0 auto;
   overflow: hidden;
   transition: opacity 180ms linear, visibility 0ms linear;
   white-space: nowrap;
@@ -518,28 +488,94 @@ input[type='checkbox']:checked {
   -webkit-animation: fadeIn 500ms ease-in;
 }
 
-/* Editor buttons */
+/* Editor toolbar. */
 
-.gallery .edit-bar-spacer {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  display: -webkit-box;
+.gallery .edit-mode-toolbar .options {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  visibility: hidden;
+}
+
+.gallery .edit-mode-toolbar .edit-bar-spacer {
+  display: block;
   height: 100%;
-  left: 280px;
   opacity: 0;
-  right: 280px;
   transition: opacity 180ms linear, visibility 0ms linear 180ms;
   visibility: hidden;
-  margin-bottom: -55px;
 }
 
+.gallery[editing] .edit-mode-toolbar .options {
+  opacity: 1;
+  visibility: visible;
+}
+
+.gallery .edit-mode-toolbar .saved,
+.gallery .edit-mode-toolbar .overwrite-original {
+  cursor: inherit;
+  font-size: 90%;
+  opacity: 0;
+  pointer-events: none;
+  transition: all linear 120ms;
+}
+
+.gallery .edit-mode-toolbar .overwrite-original {
+  margin-left: 16px;
+}
+
+.gallery .edit-mode-toolbar .saved {
+  margin-left: 14px;
+}
+
+.gallery .edit-mode-toolbar .overwrite-original > input {
+  float: left;

[mtomasz, 2015/06/02 10:59:20]

nit: Please confirm that the new UI renders correctly on RTL.

[yawano, 2015/06/02 11:37:34]

Thank you for the catch! It didn't work in RTL. I fixed it with the new patch
set.

+  margin: 1px 0;
+}
+
+.gallery .edit-mode-toolbar .overwrite-original > .label {
+  color: white;
+  float: left;
+  margin-left: 8px;
+}
+
+.gallery[editing] .edit-mode-toolbar .saved {
+  color: white;
+  opacity: 0.5;
+}
+
+.gallery[editing] .edit-mode-toolbar .overwrite-original,
+.gallery[editing] .edit-mode-toolbar .overwrite-original > * {
+  cursor: pointer;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.gallery[editing] .overwrite-original[disabled] {
+  opacity: 0.5;
+}
+
+.gallery[editing] .overwrite-original[disabled],
+.gallery[editing] .overwrite-original[disabled] > * {
+  cursor: default;
+  pointer-events: none;
+}
+
+.gallery .edit-mode-toolbar .saved[highlighted] {
+  transform: scaleX(1.1) scaleY(1.1) rotate(0);
+  opacity: 1;
+}
+
+/* Editor buttons. */
+
 .gallery .toolbar .edit-main {
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
+  align-items: center;
   color: white;
-  display: -webkit-box;
+  display: flex;
   height: 55px;
+  justify-content: center;
   overflow: visible;
 }
 
@@ -572,11 +608,14 @@ input[type='checkbox']:checked {
 .gallery .header button,
 .gallery .toolbar button {
   height: 40px;
-  margin: 6px 0;
   min-width: 40px;  /* Reset. */
   width: 40px;
 }
 
+.gallery .header button {
+  margin: 6px 0;
+}
+
 .gallery .toolbar button:focus {
   z-index: 11;
 }