stylus/popup.html
derv82 0161df5af0 Addressed PR feedback: i18n, result.onlick, description-expander, loader fix
* i18n text and titles for all labels.
* Clicking a search result opens the page for that style.
* Descriptions are truncated with (i) info button; expands description when clicked
* Simplified/fixed setLoader() + lds-spinner functionality.
2017-12-06 01:22:33 -08:00

212 lines
8.7 KiB
HTML

<html id="stylus">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="popup/popup.css">
<link rel="stylesheet" href="popup/search-results.css">
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@supports (-moz-appearance:none) {
/* increased specificity to override sane selectors in user styles */
html#stylus.firefox #stylus-popup #actions * {
transition: none !important;
}
}
</style>
<!-- Notes:
* Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
* inter-tag whitespace in templates is automatically removed in localization.js
* i18n-anything attribute automatically creates "anything" attribute
-->
<template data-id="style">
<div class="entry">
<div class="main-controls">
<label class="style-name">
<input class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
<div class="actions">
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
</svg>
</a>
<a href="#" class="delete" i18n-title="deleteStyleLabel">
<svg class="svg-icon remove" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
</svg>
</a>
</div>
</div>
</template>
<template data-id="writeStyle">
<a class="write-style-link"></a>
</template>
<template data-id="noStyles">
<div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
</template>
<template data-id="regexpProblemIndicator">
<div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
</template>
<template data-id="regexpProblemExplanation">
<div id="regexp-explanation">
<div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
<div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
<button i18n-text="confirmOK"></button>
</div>
</template>
<template data-id="unavailableInfo">
<div class="blocked-info">
<label i18n-text="stylusUnavailableForURL"></label>
<p i18n-text="stylusUnavailableForURLdetails"></p>
</div>
</template>
<template data-id="unreachableInfo">
<div class="blocked-info">
<label i18n-text="unreachableContentScript"></label>
<p i18n-text="unreachableFileHint"></p>
</div>
</template>
<template data-id="searchResult">
<div class="searchResult">
<img class="searchResult-screenshot" />
<h3 class="searchResult-title"></h3>
<div class="searchResult-description-group">
<div class="searchResult-description"></div>
<div class="searchResult-description-info">
<svg class="svg-icon info" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
</svg>
</div>
</div>
<div class="searchResult-author">
<label i18n-text="author"></label>
<a class="searchResult-authorLink" target="_blank"></a>
</div>
<div class="searchResult-meta">
<div class="searchResult-metaRating">
<span i18n-text="searchResultRating"></span>:
<span class="searchResult-rating"></span>
</div>
<div class="searchResult-metaInstallCounts">
<span i18n-text="searchResultInstallCount"></span>:
<span class="searchResult-installCount"></span>
</div>
</div>
<div class="actions">
<button class="searchResult-install" i18n-text="installButton"></button>
<button class="searchResult-customize hidden"
i18n-text="searchResultCustomize"
i18n-title="searchResultCustomizeTooltip"></button>
</div>
</div>
</template>
<script src="js/dom.js"></script>
<script src="js/messaging.js"></script>
<script src="js/localization.js"></script>
<script src="js/prefs.js"></script>
<script src="content/apply.js"></script>
<script src="popup/popup.js"></script>
<script src="popup/search-results.js"></script>
<script src="popup/hotkeys.js"></script>
</head>
<body id="stylus-popup">
<div id="confirm">
<div>
<b>Style's Name</b>
<span i18n-text="deleteStyleConfirm"></span>
<div>
<button i18n-text="confirmDelete" data-cmd="ok"></button>
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
</div>
</div>
</div>
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
<div id="installed"></div>
<div class="actions">
<div id="disable-all-wrapper">
<div class="main-controls">
<label id="disableAll-label" i18n-text="disableAllStyles">
<input id="disableAll" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
</div>
</div>
<div class="actions">
<div id="searchResults" class="hidden">
<h2>
<span i18n-text="searchResultsHeader"></span>
<span id="searchResults-terms">...</span>
</h2>
<div id="searchResults-list"></div>
<div id="searchResultsNav">
<button id="searchResultsNav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button>
<label>
<span id="searchResultsNav-currentPage" i18n-title="paginationCurrent">-</span>
/
<span id="searchResultsNav-totalPages" i18n-title="paginationTotal">-</span>
</label>
<button id="searchResultsNav-next" i18n-title="paginationNext" disabled>&#8594;</button>
</div>
</div>
<div class="left-gutter"></div>
<div class="main-controls">
<div id="find-styles">
<a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesTooltip"></a>
<span id="find-styles-inline-group">
<label i18n-title="findStylesInlineTooltip">
<input id="find-styles-inline" class="checker" type="checkbox" checked />
<svg class="svg-icon checked" viewBox="0 0 1000 1000">
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
</svg>
<span i18n-text="findStylesInline"></span>
</label>
</span>
</div>
<div id="searchResults-error" class="hidden"></div>
<div id="write-style">
<span id="write-style-for" i18n-text="writeStyleFor"></span>
</div>
</div>
<!-- Actions -->
<div id="popup-options">
<button id="popup-manage-button" i18n-text="openManage"
data-href="manage.html" i18n-title="popupManageTooltip"></button>
<button id="popup-options-button" i18n-text="openOptionsPopup"></button>
<button id="popup-shortcuts-button" class="chromium-only"
i18n-text="shortcuts"
i18n-title="shortcutsNote"></button>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
<symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
</symbol>
</svg>
</body>
</html>