blob: 4b4e39c7755c7a8de87338f4b5a2cf89b64b4c66 [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="import" href="chrome://resources/html/polymer.html">
<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/util.js"></script>
<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.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">
cr-checkbox {
--cr-checkbox-checked-box-color: white;
--cr-checkbox-label-color: white;
--cr-checkbox-label-container: {
-webkit-padding-start: 6px;
};
--cr-checkbox-mark-color: black;
--cr-checkbox-ripple-checked-color: white;
--cr-checkbox-ripple-size: 38px;
--cr-checkbox-ripple-unchecked-color: white;
--cr-checkbox-size: 14px;
--cr-checkbox-unchecked-box-color: white;
}
paper-slider {
--paper-slider-active-color: white;
--paper-slider-container-color: rgba(255, 255, 255, 0.2);
--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;
}
paper-button {
--paper-button-ink-color: black;
}
files-toggle-ripple {
--files-toggle-ripple-activated: {
opacity: 0.4;
};
}
cr-input {
--cr-form-field-label: {
color: rgba(255, 255, 255, 0.54);
display: block;
font-size: var(--cr-form-field-label-font-size);
letter-spacing: 0.4px;
line-height: var(--cr-form-field-label-font-size);
margin-bottom: 0;
}
--cr-input-color: white;
--cr-input-container: {
border-radius: 0;
}
--cr-input-input: {
background-color: transparent;
border-bottom: 1px solid var(--paper-grey-800);
}
--cr-input-padding-end: 0;
--cr-input-padding-start: 0;
--cr-input-error-display: none;
--cr-input-focus-color: white;
}
#rename-input {
font-size: 16px;
margin: 8px 0;
min-width: 160px;
text-overflow: ellipsis;
}
</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">
<cr-input id="rename-input" spellcheck="false"></cr-input>
</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"
i18n-values="aria-label:GALLERY_THUMBNAIL"
has-tooltip
disabled>
<div class="icon slide-mode"></div>
<div class="icon thumbnail-mode"></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">
<cr-checkbox class="overwrite-original"
i18n-content="GALLERY_OVERWRITE_ORIGINAL">
</cr-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>