blob: c7aba9f2f19bbadab322eaf819cd48f963f7287c [file] [log] [blame]
<!--
-- Copyright 2014 The Chromium Authors. All rights reserved.
-- Use of this source code is governed by a BSD-style license that can be
-- found in the LICENSE file.
-->
<html i18n-values="dir:textdirection">
<head>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="../file_manager/foreground/css/list.css">
<link rel="stylesheet" href="../file_manager/foreground/css/common.css">
<link rel="stylesheet" href="../file_manager/foreground/css/file_types.css">
<link rel="stylesheet" href="../file_manager/foreground/css/share_dialog.css">
<link rel="stylesheet" href="css/gallery.css">
<script src="chrome://resources/js/polymer_config.js"></script>
<script src="chrome://resources/js/util.js"></script>
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_ripple.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toast.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toggle_ripple.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_tooltip.html">
<script src="js/gallery_scripts.js"></script>
<style is="custom-style">
paper-checkbox {
--paper-checkbox-checked-color: white;
--paper-checkbox-checked-ink-color: white;
--paper-checkbox-checkmark-color: black;
--paper-checkbox-label-color: white;
--paper-checkbox-label-spacing: 6px;
--paper-checkbox-size: 14px;
--paper-checkbox-unchecked-color: white;
--paper-checkbox-unchecked-ink-color: white;
}
paper-input-container {
--paper-input-container-color: rgba(255, 255, 255, 0.2);
--paper-input-container-focus-color: white;
--paper-input-container-underline-focus: {
height: 1px;
}
}
paper-slider {
--paper-slider-active-color: white;
--paper-slider-knob-color: white;
--paper-slider-secondary-color: transparent;
}
paper-progress {
--paper-progress-container-color: rgba(0, 0, 0, 0.3);
--paper-progress-active-color: #1AC222;
}
</style>
</head>
<body>
<div class="gallery">
<div id="content" class="content">
<div class="thumbnail-view"></div>
</div>
<div id="top-toolbar" class="toolbar top tool dimmable">
<div class="filename-spacer">
<!-- Change this to use paper-input after ChromeVox supports shadow DOM. -->
<paper-input-container id="rename-input" no-label-float>
<input spellcheck="false"></input>
</paper-input-container>
</div>
<div class="button-spacer">
<!-- Use button element for edit button to implement toggle button with
-- custom ripple effect. -->
<button class="edit icon-button" i18n-values="aria-label:GALLERY_EDIT"
has-tooltip
disabled>
<div class="icon"></div>
<files-toggle-ripple></files-toggle-ripple>
</button>
<button class="print icon-button"
i18n-values="aria-label:GALLERY_PRINT"
has-tooltip
disabled>
<div class="icon"></div>
<files-ripple></files-ripple>
</button>
<button class="delete icon-button"
i18n-values="aria-label:GALLERY_DELETE"
has-tooltip
disabled>
<div class="icon"></div>
<files-ripple></files-ripple>
</button>
<!-- Use button element for mode button to implement toggle switch
-- button. -->
<button class="mode icon-button" disabled>
<div class="icon slide-mode" i18n-values="aria-label:GALLERY_SLIDE"
has-tooltip></div>
<div class="icon thumbnail-mode"
i18n-values="aria-label:GALLERY_THUMBNAIL"
has-tooltip></div>
<files-ripple></files-ripple>
</button>
<button class="slideshow icon-button"
i18n-values="aria-label:GALLERY_SLIDESHOW"
has-tooltip
disabled>
<div class="icon"></div>
<files-ripple></files-ripple>
</button>
<button class="share icon-button"
i18n-values="aria-label:GALLERY_SHARE"
has-tooltip
disabled>
<div class="icon"></div>
<files-ripple></files-ripple>
</button>
</div>
</div>
<paper-progress id="progress-bar" min="0" max="100" hidden></paper-progress>
<div id="bottom-toolbar" class="toolbar bottom tool dimmable">
<div class="slide-mode-toolbar">
<div class="ribbon-spacer"></div>
</div>
<div class="edit-mode-toolbar">
<div class="options">
<paper-checkbox class="overwrite-original"
i18n-content="GALLERY_OVERWRITE_ORIGINAL">
</paper-checkbox>
<div class="saved" i18n-content="GALLERY_SAVED" hidden></div>
</div>
<div class="edit-bar-spacer"></div>
<div class="exit-button-spacer">
<paper-button class="exit" i18n-content="GALLERY_EXIT"></paper-button>
</div>
</div>
<div class="bubble" hidden>
<div class="content"></div>
<span class="pointer bottom"></span>
<div class="close-x"></div>
</div>
</div>
<div class="prompt-wrapper" pos="center">
<div class="error-banner"></div>
</div>
<div class="toast-stage">
<files-toast></files-toast>
</div>
<files-tooltip></files-tooltip>
</div>
</body>
</html>