move the inline css and some more js into separate files

- stdHtml() css= arg now takes a list of files like js=
- the files are loaded in the head of the document so that styling
that comes later in the document can easily override it

fixes:
https://anki.tenderapp.com/discussions/beta-testing/661-anki-210-beta-7/page/1#comment_43164447
https://anki.tenderapp.com/discussions/beta-testing/661-anki-210-beta-7#comment_43177130
This commit is contained in:
Damien Elmes 2017-08-10 19:02:32 +10:00
parent c8e8225395
commit f3f90842dc
18 changed files with 282 additions and 193 deletions

View file

@ -1119,9 +1119,9 @@ where id in %s""" % ids2str(sf))
jsinc = ["jquery.js","browsersel.js",
"mathjax/conf.js", "mathjax/MathJax.js",
"reviewer.js"]
self._previewWeb.stdHtml(self.mw.reviewer._revHtml+
self._previewWeb.bundledCSS("reviewer.css"),
head=base, js=jsinc)
self._previewWeb.stdHtml(self.mw.reviewer._revHtml,
css=["reviewer.css"],
head=base, js=jsinc)
def _renderPreview(self, cardChanged=False):
@ -1797,7 +1797,8 @@ class BrowserToolbar(Toolbar):
def draw(self):
self.web.onBridgeCmd = self._linkHandler
self.web.stdHtml(self.html(), self.css())
self.web.stdHtml(self.html(),
css=["toolbar.css", "browser-toolbar.css"])
self.update()
if isLin:
# adjust height on a delay to work around a qt crash when
@ -1839,15 +1840,6 @@ class BrowserToolbar(Toolbar):
right += "</div>"
return self._body % right
def css(self):
return self._css + """
#header { font-weight: normal; }
a { margin-right: 1em; }
.hitem { overflow: hidden; white-space: nowrap; }
.hitem img { padding: 1px; }
.buttonOn { border: 1px solid #aaa; padding: 0px !important; }
"""
# Link handling
######################################################################

View file

@ -174,12 +174,12 @@ class CardLayout(QDialog):
jsinc = ["jquery.js","browsersel.js",
"mathjax/conf.js", "mathjax/MathJax.js",
"reviewer.js"]
pform.frontWeb.stdHtml(self.mw.reviewer._revHtml+
pform.frontWeb.bundledCSS("reviewer.css"),
head=base, js=jsinc)
pform.backWeb.stdHtml(self.mw.reviewer._revHtml+
pform.backWeb.bundledCSS("reviewer.css"),
head=base, js=jsinc)
pform.frontWeb.stdHtml(self.mw.reviewer._revHtml,
css=["reviewer.css"],
head=base, js=jsinc)
pform.backWeb.stdHtml(self.mw.reviewer._revHtml,
css=["reviewer.css"],
head=base, js=jsinc)
def updateMainArea(self):
if self._isCloze():

View file

@ -69,26 +69,6 @@ class DeckBrowser:
# HTML generation
##########################################################################
_dragIndicatorBorderWidth = "1px"
_css = """
a.deck { color: #000; text-decoration: none; min-width: 5em;
display:inline-block; }
a.deck:hover { text-decoration: underline; }
tr.deck td { border-bottom: %(width)s solid #e7e7e7; }
tr.top-level-drag-row td { border-bottom: %(width)s solid transparent; }
td { white-space: nowrap; }
tr.drag-hover td { border-bottom: %(width)s solid #aaa; }
body { margin: 1em; -webkit-user-select: none; }
.current { background-color: #e7e7e7; }
.decktd { min-width: 15em; }
.count { min-width: 4em; text-align: right; }
.optscol { width: 2em; }
.collapse { color: #000; text-decoration:none; display:inline-block;
width: 1em; }
.filtered { color: #00a !important; }
""" % dict(width=_dragIndicatorBorderWidth)
_body = """
<center>
<table cellspacing=0 cellpading=3>
@ -99,49 +79,17 @@ body { margin: 1em; -webkit-user-select: none; }
%(stats)s
%(countwarn)s
</center>
<script>
$( init );
function init() {
$("tr.deck").draggable({
scroll: false,
// can't use "helper: 'clone'" because of a bug in jQuery 1.5
helper: function (event) {
return $(this).clone(false);
},
delay: 200,
opacity: 0.7
});
$("tr.deck").droppable({
drop: handleDropEvent,
hoverClass: 'drag-hover',
});
$("tr.top-level-drag-row").droppable({
drop: handleDropEvent,
hoverClass: 'drag-hover',
});
}
function handleDropEvent(event, ui) {
var draggedDeckId = ui.draggable.attr('id');
var ontoDeckId = $(this).attr('id');
pycmd("drag:" + draggedDeckId + "," + ontoDeckId);
}
</script>
"""
def _renderPage(self, reuse=False):
css = self.mw.sharedCSS + self._css
if not reuse:
self._dueTree = self.mw.col.sched.deckDueTree()
tree = self._renderDeckTree(self._dueTree)
stats = self._renderStats()
self.web.stdHtml(self._body%dict(
tree=tree, stats=stats, countwarn=self._countWarn()), css=css,
js=["jquery.js", "jquery-ui.js"])
tree=tree, stats=stats, countwarn=self._countWarn()),
css=["deckbrowser.css"],
js=["jquery.js", "jquery-ui.js", "deckbrowser.js"])
self.web.key = "deckBrowser"
self._drawButtons()

View file

@ -103,11 +103,11 @@ class Editor:
""" % dict(flds=_("Fields"), cards=_("Cards"), rightbts="".join(righttopbtns))
bgcol = self.mw.app.palette().window().color().name()
# then load page
html = self.web.bundledCSS("editor.css") + _html
self.web.stdHtml(html % (
self.web.stdHtml(_html % (
bgcol, bgcol,
topbuts,
_("Show Duplicates")), head=self.mw.baseHTML(),
css=["editor.css"],
js=["jquery.js", "editor.js"])
# Top buttons

View file

@ -482,20 +482,13 @@ the manual for information on how to restore from an automatic backup."))
%s<br>
%s</div></div></center>
<script>$('#resume').focus()</script>
""" % (i, b), css=self.sharedCSS)
""" % (i, b))
self.bottomWeb.hide()
self.web.setFocus()
# HTML helpers
##########################################################################
sharedCSS = """
body {
margin: 2em;
}
h1 { margin-bottom: 0.2em; }
"""
def button(self, link, name, key=None, class_="", id="", extra=""):
class_ = "but "+ class_
if key:

View file

@ -106,11 +106,13 @@ class Overview:
else:
shareLink = ""
self.web.stdHtml(self._body % dict(
deck=deck['name'],
shareLink=shareLink,
desc=self._desc(deck),
table=self._table()
), self.mw.sharedCSS + self._css)
deck=deck['name'],
shareLink=shareLink,
desc=self._desc(deck),
table=self._table()
),
css=["overview.css"],
js=["jquery.js", "overview.js"])
def _desc(self, deck):
if deck['dyn']:
@ -167,29 +169,6 @@ to their original deck.""")
%(desc)s
%(table)s
</center>
<script>$(function () { $("#study").focus(); });</script>
"""
_css = """
.smallLink { font-size: 10px; }
h3 { margin-bottom: 0; }
.descfont {
padding: 1em; color: #333;
}
.description {
white-space: pre-wrap;
}
#fulldesc {
display:none;
}
.descmid {
width: 70%;
margin: 0 auto 0;
text-align: left;
}
.dyn {
text-align: center;
}
"""
# Bottom area

View file

@ -126,8 +126,9 @@ class Reviewer:
self._reps = 0
base = self.mw.baseHTML()
# main window
self.web.stdHtml(self._revHtml +
self.web.bundledCSS("reviewer.css"), head=base,
self.web.stdHtml(self._revHtml,
head=base,
css=["reviewer.css"],
js=["jquery.js",
"browsersel.js",
"mathjax/conf.js",
@ -137,7 +138,7 @@ class Reviewer:
self.bottom.web.show()
self.bottom.web.stdHtml(
self._bottomHTML(),
self.bottom._css + self._bottomCSS,
css=["toolbar-bottom.css", "reviewer-bottom.css"],
js=["jquery.js", "reviewer-bottom.js"]
)
@ -440,29 +441,6 @@ Please run Tools>Empty Cards""")
# Bottom bar
##########################################################################
_bottomCSS = """
body {
margin: 0; padding: 0;
}
button {
min-width: 60px; white-space: nowrap;
}
.hitem { margin-top: 2px; }
.stat { padding-top: 5px; }
.stat2 { padding-top: 3px; font-weight: normal; }
.stattxt { padding-left: 5px; padding-right: 5px; white-space: nowrap; }
.nobold { font-weight: normal; display: inline-block; padding-top: 4px; }
.spacer { height: 18px; }
.spacer2 { height: 16px; }
#outer {
border-top: 1px solid #aaa;
}
#innertable {
padding: 3px;
}
"""
def _bottomHTML(self):
return """
<center id=outer>

View file

@ -21,7 +21,8 @@ class Toolbar:
def draw(self):
self.web.onBridgeCmd = self._linkHandler
self.web.stdHtml(self._body % self._centerLinks(), self._css)
self.web.stdHtml(self._body % self._centerLinks(),
css=["toolbar.css"])
self.web.adjustHeightToFit()
# Available links
@ -87,35 +88,6 @@ class Toolbar:
<td class=tdcenter align=center>%s</td>
</tr></table>
</center>
"""
_css = """
#header {
padding:3px;
font-weight: bold;
border-bottom: 1px solid #aaa;
background: %s;
}
.tdcenter { white-space: nowrap; }
body {
margin:0; padding:0;
-webkit-user-select: none;
overflow: hidden;
}
* { -webkit-user-drag: none; }
.hitem {
padding-right: 6px;
text-decoration: none;
color: #000;
}
.hitem:hover {
text-decoration: underline;
}
"""
# Bottom bar
@ -123,15 +95,6 @@ text-decoration: underline;
class BottomBar(Toolbar):
_css = Toolbar._css + """
#header {
border-bottom: 0;
border-top: 1px solid #aaa;
margin-bottom: 6px;
margin-top: 0;
}
"""
_centerBody = """
<center id=outer><table width=100%% id=header><tr><td align=center>
%s</td></tr></table></center>
@ -141,5 +104,5 @@ margin-top: 0;
self.web.onBridgeCmd = self._linkHandler
self.web.stdHtml(
self._centerBody % buf,
self._css)
css=["toolbar.css", "toolbar-bottom.css"])
self.web.adjustHeightToFit()

View file

@ -159,7 +159,7 @@ class AnkiWebView(QWebEngineView):
dpi = screen.logicalDpiX()
return max(1, dpi / 96.0)
def stdHtml(self, body, css="", js=["jquery.js"], head=""):
def stdHtml(self, body, css=[], js=["jquery.js"], head=""):
if isWin:
buttonspec = "button { font-size: 12px; font-family:'Segoe UI'; }"
fontspec = 'font-size:12px;font-family:"Segoe UI";'
@ -175,26 +175,28 @@ border-radius:5px; font-family: Helvetica }"""
family = self.font().family()
fontspec = 'font-size:14px;font-family:%s;'%\
family
csstxt = "\n".join([self.bundledCSS("webview.css")]+
[self.bundledCSS(fname) for fname in css])
jstxt = "\n".join([self.bundledScript("webview.js")]+
[self.bundledScript(fname) for fname in js])
head += csstxt + jstxt
html="""
html=f"""
<!doctype html>
<html><head><title>%s</title><style>
body { zoom: %f; %s }
%s
%s</style>
%s
%s
<html><head>
<title>{self.title}</title>
<style>
body {{ zoom: {self.zoomFactor()}; {fontspec} }}
{buttonspec}
</style>
{head}
</head>
<body>%s</body></html>""" % (
self.title,
self.zoomFactor(),
fontspec,
buttonspec,
css, jstxt,
head, body)
<body>{body}</body>
</html>"""
#print(html)
self.setHtml(html)

21
web/browser-toolbar.css Normal file
View file

@ -0,0 +1,21 @@
#header {
font-weight: normal;
}
a {
margin-right: 1em;
}
.hitem {
overflow: hidden;
white-space: nowrap;
}
.hitem img {
padding: 1px;
}
.buttonOn {
border: 1px solid #aaa;
padding: 0 !important;
}

59
web/deckbrowser.css Normal file
View file

@ -0,0 +1,59 @@
a.deck {
color: #000;
text-decoration: none;
min-width: 5em;
display: inline-block;
}
a.deck:hover {
text-decoration: underline;
}
tr.deck td {
border-bottom: 1px solid #e7e7e7;
}
tr.top-level-drag-row td {
border-bottom: 1px solid transparent;
}
td {
white-space: nowrap;
}
tr.drag-hover td {
border-bottom: 1px solid #aaa;
}
body {
margin: 1em;
-webkit-user-select: none;
}
.current {
background-color: #e7e7e7;
}
.decktd {
min-width: 15em;
}
.count {
min-width: 4em;
text-align: right;
}
.optscol {
width: 2em;
}
.collapse {
color: #000;
text-decoration: none;
display: inline-block;
width: 1em;
}
.filtered {
color: #00a !important;
}

30
web/deckbrowser.js Normal file
View file

@ -0,0 +1,30 @@
$(init);
function init() {
$("tr.deck").draggable({
scroll: false,
// can't use "helper: 'clone'" because of a bug in jQuery 1.5
helper: function (event) {
return $(this).clone(false);
},
delay: 200,
opacity: 0.7
});
$("tr.deck").droppable({
drop: handleDropEvent,
hoverClass: 'drag-hover'
});
$("tr.top-level-drag-row").droppable({
drop: handleDropEvent,
hoverClass: 'drag-hover'
});
}
function handleDropEvent(event, ui) {
var draggedDeckId = ui.draggable.attr('id');
var ontoDeckId = $(this).attr('id');
pycmd("drag:" + draggedDeckId + "," + ontoDeckId);
}

30
web/overview.css Normal file
View file

@ -0,0 +1,30 @@
.smallLink {
font-size: 10px;
}
h3 {
margin-bottom: 0;
}
.descfont {
padding: 1em;
color: #333;
}
.description {
white-space: pre-wrap;
}
#fulldesc {
display: none;
}
.descmid {
width: 70%;
margin: 0 auto 0;
text-align: left;
}
.dyn {
text-align: center;
}

1
web/overview.js Normal file
View file

@ -0,0 +1 @@
$(function () { $("#study").focus(); });

50
web/reviewer-bottom.css Normal file
View file

@ -0,0 +1,50 @@
body {
margin: 0;
padding: 0;
}
button {
min-width: 60px;
white-space: nowrap;
}
.hitem {
margin-top: 2px;
}
.stat {
padding-top: 5px;
}
.stat2 {
padding-top: 3px;
font-weight: normal;
}
.stattxt {
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
}
.nobold {
font-weight: normal;
display: inline-block;
padding-top: 4px;
}
.spacer {
height: 18px;
}
.spacer2 {
height: 16px;
}
#outer {
border-top: 1px solid #aaa;
}
#innertable {
padding: 3px;
}

6
web/toolbar-bottom.css Normal file
View file

@ -0,0 +1,6 @@
#header {
border-bottom: 0;
border-top: 1px solid #aaa;
margin-bottom: 6px;
margin-top: 0;
}

30
web/toolbar.css Normal file
View file

@ -0,0 +1,30 @@
#header {
padding: 3px;
font-weight: bold;
border-bottom: 1px solid #aaa;
}
.tdcenter {
white-space: nowrap;
}
body {
margin: 0;
padding: 0;
-webkit-user-select: none;
overflow: hidden;
}
* {
-webkit-user-drag: none;
}
.hitem {
padding-right: 6px;
text-decoration: none;
color: #000;
}
.hitem:hover {
text-decoration: underline;
}

7
web/webview.css Normal file
View file

@ -0,0 +1,7 @@
body {
margin: 2em;
}
h1 {
margin-bottom: 0.2em;
}