ui/file_manager/gallery/gallery.html

   1 <!--
   2   -- Copyright 2014 The Chromium Authors. All rights reserved.
   3   -- Use of this source code is governed by a BSD-style license that can be
   4   -- found in the LICENSE file.
   5   -->
   6 <html i18n-values="dir:textdirection">
   7 <head>
   8   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   9   <link rel="stylesheet" href="../file_manager/foreground/css/list.css">
  10   <link rel="stylesheet" href="../file_manager/foreground/css/common.css">
  11   <link rel="stylesheet" href="../file_manager/foreground/css/file_types.css">
  12   <link rel="stylesheet" href="../file_manager/foreground/css/share_dialog.css">
  13   <link rel="stylesheet" href="css/gallery.css">
  14
  15   <script src="chrome://resources/js/polymer_config.js"></script>
  16   <script src="chrome://resources/js/util.js"></script>
  17
  18   <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
  19   <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
  20   <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
  21   <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
  22   <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
  23   <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toast.html">
  24   <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toggle_ripple.html">
  25
  26   <script src="js/gallery_scripts.js"></script>
  27   <style is="custom-style">
  28     paper-checkbox {
  29       --paper-checkbox-label-color: white;
  30       --paper-checkbox-checked-color: white;
  31       --paper-checkbox-checked-ink-color: white;
  32       --paper-checkbox-checkmark-color: black;
  33       --paper-checkbox-unchecked-color: white;
  34       --paper-checkbox-unchecked-ink-color: white;
  35     }
  36     paper-input-container {
  37       --paper-input-container-color: rgba(255, 255, 255, 0.2);
  38       --paper-input-container-focus-color: white;
  39       --paper-input-container-underline-focus: {
  40         height: 1px;
  41       }
  42     }
  43     paper-slider {
  44       --paper-slider-active-color: white;
  45       --paper-slider-knob-color: white;
  46       --paper-slider-secondary-color: transparent;
  47     }
  48   </style>
  49 </head>
  50 <body>
  51   <div class="gallery">
  52     <div id="content" class="content">
  53       <div class="thumbnail-view"></div>
  54     </div>
  55     <div id="top-toolbar" class="toolbar top tool dimmable">
  56       <div class="filename-spacer">
  57         <!-- Change this to use paper-input after ChromeVox supports shadow DOM. -->
  58         <paper-input-container id="rename-input" no-label-float>
  59           <input spellcheck="false"></input>
  60         </paper-input-container>
  61       </div>
  62       <div class="button-spacer">
  63         <!-- Use button element for edit button to implement toggle button with
  64           -- custom ripple effect. -->
  65         <button class="edit icon-button" i18n-values="title:GALLERY_EDIT"
  66                 disabled>
  67           <div class="icon"></div>
  68           <files-toggle-ripple></files-toggle-ripple>
  69         </button>
  70         <paper-button class="print icon-button"
  71                       i18n-values="title:GALLERY_PRINT"
  72                       disabled></paper-button>
  73         <paper-button class="delete icon-button"
  74                       i18n-values="title:GALLERY_DELETE"
  75                       disabled></paper-button>
  76         <!-- Use button element for mode button to implement toggle switch
  77           -- button. -->
  78         <button class="mode icon-button" disabled>
  79           <div class="icon slide-mode" i18n-values="title:GALLERY_SLIDE"></div>
  80           <div class="icon thumbnail-mode"
  81                i18n-values="title:GALLERY_THUMBNAIL"></div>
  82           <paper-ripple></paper-ripple>
  83         </button>
  84         <paper-button class="slideshow icon-button"
  85                       i18n-values="title:GALLERY_SLIDESHOW"
  86                       disabled></paper-button>
  87         <paper-button class="share icon-button"
  88                       i18n-values="title:GALLERY_SHARE"
  89                       disabled></paper-button>
  90       </div>
  91     </div>
  92     <div id="bottom-toolbar" class="toolbar bottom tool dimmable">
  93       <div class="slide-mode-toolbar">
  94         <div class="ribbon-spacer"></div>
  95       </div>
  96       <div class="edit-mode-toolbar">
  97         <div class="options">
  98           <paper-checkbox class="overwrite-original"
  99                           i18n-content="GALLERY_OVERWRITE_ORIGINAL">
 100           </paper-checkbox>
 101           <div class="saved" i18n-content="GALLERY_SAVED" hidden></div>
 102         </div>
 103         <div class="edit-bar-spacer"></div>
 104         <div class="exit-button-spacer">
 105           <paper-button class="exit" i18n-content="GALLERY_EXIT"></paper-button>
 106         </div>
 107       </div>
 108       <div class="bubble" hidden>
 109         <div class="content"></div>
 110         <span class="pointer bottom"></span>
 111         <div class="close-x"></div>
 112       </div>
 113     </div>
 114     <div class="prompt-wrapper" pos="center">
 115       <div class="error-banner"></div>
 116     </div>
 117     <div class="toast-stage">
 118       <files-toast></files-toast>
 119     </div>
 120   </div>
 121 </body>
 122 </html>