mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 22:12:21 -04:00
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:
parent
c8e8225395
commit
f3f90842dc
18 changed files with 282 additions and 193 deletions
|
@ -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
|
||||
######################################################################
|
||||
|
||||
|
|
|
@ -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():
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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
21
web/browser-toolbar.css
Normal 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
59
web/deckbrowser.css
Normal 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
30
web/deckbrowser.js
Normal 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
30
web/overview.css
Normal 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
1
web/overview.js
Normal file
|
@ -0,0 +1 @@
|
|||
$(function () { $("#study").focus(); });
|
50
web/reviewer-bottom.css
Normal file
50
web/reviewer-bottom.css
Normal 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
6
web/toolbar-bottom.css
Normal 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
30
web/toolbar.css
Normal 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
7
web/webview.css
Normal file
|
@ -0,0 +1,7 @@
|
|||
body {
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
Loading…
Reference in a new issue