rattail/appypod-rattail
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Appy web interface has now 2 skins: the default one, with a fixed with; the one named 'wide', that takes the whole screen width. Choosing the skin is made via de Conf instance, attribute 'skin'.

Browse source
This commit is contained in:
Gaetan Delannay 2014-01-20 16:30:14 +01:00
parent e1d0597694
commit 3b9c078fbb
8 changed files with 40 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
gen/__init__.py
View file

@ -152,6 +152,9 @@ class Config:
class Config(appy.gen.Config):
langages = ('en', 'fr')
'''
# What skin to use for the web interface? Appy has 2 skins: the default
# one (with a fixed width) and the "wide" skin (takes the whole page width).
skin = None # None means: the default one. Could be "wide".
# For every language code that you specify in this list, appy.gen will
# produce and maintain translation files.
languages = ['en']

15
gen/mixins/ToolMixin.py
View file

@ -179,12 +179,21 @@ class ToolMixin(BaseMixin):
if align == 'right': return 'left'
return align
def getGlobalCssJs(self):
def getGlobalCssJs(self, dir):
'''Returns the list of CSS and JS files to include in the main template.
The method ensures that appy.css and appy.js come first.'''
The method ensures that appy.css and appy.js come first. If p_dir
(=language *dir*rection) is "rtl" (=right-to-left), the stylesheet
for rtl languages is also included.'''
names = self.getPhysicalRoot().ui.objectIds('File')
# The single Appy Javascript file
names.remove('appy.js'); names.insert(0, 'appy.js')
names.remove('appyrtl.css'); names.insert(0, 'appyrtl.css')
# CSS changes for left-to-right languages
names.remove('appyrtl.css')
if dir == 'rtl': names.insert(0, 'appyrtl.css')
# CSS changes if the "wide" skin is in use
names.remove('appywide.css')
cfg = self.getProductConfig().appConfig
if cfg.skin == 'wide': names.insert(0, 'appywide.css')
names.remove('appy.css'); names.insert(0, 'appy.css')
return names

20
gen/ui/appy.css
View file

@ -1,5 +1,6 @@
html { height: 100% }
body { font: 75% "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
background-color: #EAEAEA; margin-top: 18px }
height: 100%; background-color: #EAEAEA; margin-top: 18px }
pre { font: 100% "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
margin: 0 }
h1 { font-size: 14pt; margin:6px 0 6px 0 }
@ -51,16 +52,17 @@ img { border: 0; vertical-align: middle }
.xhtml img { margin-right: 5px }
.xhtml p { margin: 3px 0 7px 0 }
.clickable { cursor: pointer }
.main { width: 900px; background-color: white; box-shadow: 3px 3px 3px #A9A9A9;
border-style: solid; border-width: 1px; border-color: grey }
.top { height: 89px; margin-left: 3em; vertical-align: top }
.main { width: 900px; height: 95%; box-shadow: 3px 3px 3px #A9A9A9;
border-style: solid; border-width: 1px; border-color: grey}
.top { height: 89px; margin-left: 3em; vertical-align: top;
background-color: white }
.lang { margin-right: 6px }
.userStrip { background-color: #6282B3; border-top: 3px solid #034984;
border-bottom: 2px solid #034984 }
border-bottom: 2px solid #034984; width: 100%; height: 100% }
.userStripText { padding: 0 0.3em 0 0.3em; color: white }
.userStrip a { color: #e7e7e7 }
.userStrip a:visited { color: #e7e7e7 }
.navigate { border-bottom: 1px solid #5F7983;
.navigate { border-bottom: 1px solid #5F7983; height: 100%;
background-color: #dbdde1; font-weight: bold }
.navigate td { padding: 4px 9px }
.login { margin: 3px; color: black }
@ -68,9 +70,9 @@ img { border: 0; vertical-align: middle }
cursor:pointer; font-size: 90%; padding: 1px 0 0 10px;
background-color: transparent !important }
.buttons { margin-left: 4px }
.message { position: absolute; top: -40px; left: 150px; font-size: 90%;
.message { position: absolute; top: -40px; left: 50%; font-size: 90%;
width: 600px; border: 1px #F0C36D solid; padding: 6px;
background-color: #F9EDBE; text-align: center;
background-color: #F9EDBE; text-align: center; margin-left: -300px;
border-radius: 2px 2px 2px 2px; box-shadow: 0 2px 4px #A9A9A9 }
.focus { font-size: 90%; margin: 7px 0 7px 0; padding: 7px;
background-color: #d7dee4; border-radius: 2px 2px 2px 2px;
@ -135,7 +137,7 @@ img { border: 0; vertical-align: middle }
.topSpace { margin-top: 15px }
.bottomSpace { margin-bottom: 15px }
.pageLink { margin-right: 8px }
.footer { font-size: 95% }
.footer { font-size: 95%; height: 100% }
.footer td { background-color: #CBCBC9; border-top: 1px solid grey;
padding: 0.4em 1em 0.5em }
.code { font-family: "Lucida Console","Courier New" }

2
gen/ui/appywide.css Normal file
View file

@ -0,0 +1,2 @@
body { margin: 0 }
.main {border: 0; width: 100%; height: 100%}

BIN
gen/ui/banner.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 61 KiB

BIN
gen/ui/bannerrtl.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 62 KiB

2
gen/wrappers/ToolWrapper.py
View file

@ -304,7 +304,7 @@ class ToolWrapper(AbstractWrapper):
</table>''')
pxHome = Px('''
<table width="300px" height="240px" align="center">
<table>
<tr valign="middle">
<td align="center">::_('front_page_text')</td>
</tr>

23
gen/wrappers/__init__.py
View file

@ -98,10 +98,9 @@ class AbstractWrapper(object):
<head>
<title>:_('app_name')</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<x for="name in ztool.getGlobalCssJs()">
<link if="name.endswith('.css') and \
not ((dir == 'ltr') and (name == 'appyrtl.css'))"
rel="stylesheet" type="text/css" href=":url(name)"/>
<x for="name in ztool.getGlobalCssJs(dir)">
<link if="name.endswith('.css')" rel="stylesheet" type="text/css"
href=":url(name)"/>
<script if="name.endswith('.js')" type="text/javascript"
src=":url(name)"></script>
</x>
@ -154,7 +153,7 @@ class AbstractWrapper(object):
<tr class="top">
<!-- Top banner -->
<td var="bannerName=(dir == 'ltr') and 'banner' or 'bannerrtl'"
style=":url('%s.png' % bannerName, bg=True)">
style=":url(bannerName, bg=True) + '; background-repeat:no-repeat'">
<!-- Top links -->
<div style="margin-top: 4px" align=":dright">
@ -188,14 +187,14 @@ class AbstractWrapper(object):
</tr>
<!-- The message strip -->
<tr valign="top">
<td><div style="position: relative">:tool.pxMessage</div></td>
<tr height="0px">
<td><div style="position:relative">:tool.pxMessage</div></td>
</tr>
<!-- The user strip -->
<tr>
<tr height="33px">
<td>
<table class="userStrip" width="100%">
<table class="userStrip">
<tr>
<!-- The user login form for anonymous users -->
<td align="center"
@ -257,12 +256,12 @@ class AbstractWrapper(object):
</tr>
<!-- The navigation strip -->
<tr if="zobj and showPortlet and (layoutType != 'edit')">
<tr height="26px" if="zobj and showPortlet and (layoutType != 'edit')">
<td>:obj.pxNavigationStrip</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<!-- The portlet -->
<td if="showPortlet" class="portlet">:tool.pxPortlet</td>
@ -273,7 +272,7 @@ class AbstractWrapper(object):
</td>
</tr>
<!-- Footer -->
<tr><td>:tool.pxFooter</td></tr>
<tr height="26px"><td>:tool.pxFooter</td></tr>
</table>
</body>
</html>''', prologue=Px.xhtmlPrologue)