StartPage: Visual overhaul and CSS fixes (#10391)

* StartPage visual overhaul and CSS fixes
* Add qewer33 to CONTRIBUTORS
This commit is contained in:
qewer
2023-08-27 21:27:53 +03:00
committed by GitHub
parent 6200150fac
commit 0a093e1ed1
12 changed files with 303 additions and 202 deletions

View File

@@ -206,6 +206,7 @@ Willem
Wurstwasser
yang12
Yorik van Havre (yorikvanhavre)
Yunus Erdem Ergül (qewer33)
zararina
Zdeněk Havlík
Zheng Lei (realthunder)

View File

@@ -25,13 +25,17 @@ SET(StartPage_ImageResources
images/freecad.png
images/installed.png
images/new_file_thumbnail.svg
images/settings.png
images/icon_settings.png
images/new_empty_file.png
images/new_import_file.png
images/new_parametric_part.png
images/new_csg_part.png
images/new_2d_draft.png
images/new_architecture.png
images/icon_documents.png
images/icon_help.png
images/icon_activity.png
images/icon_blog.png
)
SET(StartPage_Resources

View File

@@ -1,18 +1,23 @@
/* --- MAIN --- */
html {
height: 100%;
color: BGTCOLOR;
display: flex;
flex-direction: column;
overflow: hidden;
}
body {
height: 100%;
background: BACKGROUND;
color: BGTCOLOR;
font-family: FONTFAMILY;
font-size: FONTSIZE;
height: 100%;
overflow: hidden;
}
OVERFLOW
OVERFLOW
a,
a:link,
a:visited {
@@ -29,113 +34,166 @@ h1 {
h2 {
text-align: center;
clear: both;
padding-top: 15px;
}
hr {
height: 20px;
border: none;
padding-top: 5px;
}
.hidden {
display: none;
display: none !important;
}
#main-container {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
margin: 20px;
background: BASECOLOR;
border-radius: 15px;
}
#title-bar {
display: flex;
flex-direction: row-reverse;
align-items: center;
width: 100%;
height: 5.5em;
min-height: 5.5em;
background: BASECOLOR;
border-radius: 15px;
z-index: 2;
}
.welcome {
display: flex;
align-items: center;
color: TEXTCOLOR;
font-size: 1.3em;
margin-left: 25px;
font-weight: bold;
}
.welcome img {
width: 28px;
height: 28px;
margin-right: 10px;
}
.version {
font-size: 0.8em;
float: right;
padding-right: 10px;
font-size: 1em;
margin-right: 25px;
}
.settingsicon {
width: 16px;
height: 16px;
margin-left: 20px;
width: 22px;
height: 22px;
margin-left: 10px;
vertical-align: middle;
}
.container {
margin: 2%;
height: 95%;
@media only screen and (max-width: 1100px) {
.welcome {
display: none;
}
.version {
display: none;
}
}
/* --- TABS --- */
ul.tabs {
margin: 9px 0;
display: flex;
position: absolute;
top: 2em;
left: 50%;
transform: translateX(-50%);
}
ul.tabs li {
list-style: none;
display: inline;
}
ul.tabs li a {
display: flex;
align-items: center;
border-radius: 8px;
padding: 6px 12px;
margin: 0 3px;
color: TEXTCOLOR;
background-color: BOXCOLOR;
padding: 8px 14px 8px 14px;
text-decoration: none;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
border: 1px solid BOXCOLOR;
border-radius: 3px 3px 0px 0px;
box-shadow: #445 0 -5px 5px;
outline: 0;
font-size: 1.3em;
transition: 100ms;
}
ul.tabs li a img {
margin-right: 5px;
}
ul.tabs li a:hover {
background-color: TEXTCOLOR;
color: BASECOLOR;
border-color: TEXTCOLOR;
background-color: BOXCOLOR;
}
ul.tabs li a.active,
ul.tabs li a.active:hover {
color: TEXTCOLOR;
background-color: BASECOLOR;
border-bottom: 1px solid BASECOLOR;
border-color: BASECOLOR;
background-color: BOXCOLOR;
font-weight: bold;
}
.panel {
background: BASECOLOR;
display: flex;
flex-direction: column;
color: TEXTCOLOR;
padding: 15px;
clear: both;
margin-bottom: 10px;
border-radius: 0px 3px 3px 3px;
padding-top: 0;
overflow: auto;
box-shadow: SHADOW 0 2px 5px;
}
.footnote {
text-align: center;
display: block; /* footnote tips display */
clear: both;
padding-top: 10px;
}
/* --- DOCUMENTS TAB --- */
.thumbnails ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
}
ul.icons {
clear: both;
}
.icon {
.file-card {
list-style: none;
display: inline;
float: left;
padding: 5px 0px 15px 10px;
padding: 10px 0px 15px 10px;
width: 138px;
height: 200px;
background: BOXCOLOR;
border-radius: 3px;
border-radius: 8px;
margin: 10px;
box-shadow: SHADOW 0 0px 6px;
word-wrap: break-word;
}
.icon h4 {
.file-card h4 {
margin: 3px 0;
max-width: 90%;
}
.icon img {
.file-card img {
width: 128px;
height: 128px;
border-radius: 4px;
}
.icon p {
.file-card p {
margin: 0;
}
@@ -154,65 +212,118 @@ a .caption:visited {
text-decoration-color: TEXTCOLOR;
}
.icon-new-template {
.quickstart-button-card {
list-style: none;
display: flex;
align-items: center;
float: left;
padding: 5px 10px;
width: 235px;
height: 70px;
width: 18em;
height: 5em;
background: BOXCOLOR;
border-radius: 3px;
border-radius: 8px;
margin: 10px;
box-shadow: SHADOW 0 0px 6px;
word-wrap: break-word;
}
.icon-new-template a {
.quickstart-button-card a {
display: flex;
}
.icon-new-template h3 {
margin: 3px 0;
.quickstart-button-card h3 {
max-width: 90%;
text-align: left;
margin: 3px 0;
margin-bottom: 5px;
text-align: left;
}
.icon-new-template img {
.quickstart-button-card img {
width: 64px;
height: 64px;
margin-right: 10px;
}
.icon-new-template p {
.quickstart-button-card p {
margin: 0;
}
.docbox a:hover {
text-decoration: underline;
.notes {
display: none; /* notes display */
/* don't change this line */
width: 100%;
}
#notepad {
width: calc(100% - 30px);
min-height: 300px;
margin: 10px;
color: TEXTCOLOR;
background: BOXCOLOR;
border: none;
padding: 10px;
border-radius: 8px;
}
#notepad:focus {
outline: none;
}
/* --- HELP TAB --- */
#help-tab-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.docbox {
float: left;
padding: 10px;
max-width: 360px;
background: BOXCOLOR;
border-radius: 3px;
border-radius: 8px;
margin: 10px;
box-shadow: SHADOW 0 0px 6px;
}
.docbox h2 {
text-align: center;
}
.docbox h3 {
display: flex;
align-items: center;
}
.docbox img {
max-width: 24px;
max-height: 24px;
margin-right:10px;
}
.docbox a:hover {
text-decoration: underline;
}
.workbenches li,
.addonslist li {
display: flex;
align-items: center;
width: 50%;
float: left;
margin-bottom: 5px;
}
.workbenches li img {
margin-right: 5px;
}
ul.workbenches,
ul.addonslist {
overflow: hidden;
padding: 10px;
}
/* --- ACTIVITY TAB --- */
.forum img {
max-width: 100% !important;
max-height: 100% !important;
@@ -222,13 +333,6 @@ a .caption:visited {
max-width: 98%;
}
h3 a {
height: 32px;
vertical-align: middle;
padding-bottom: 18px;
padding-left: 5px;
}
#commits ul {
margin: 30px 0;
}
@@ -238,31 +342,8 @@ h3 a {
margin-bottom: 10px;
}
.footnote {
text-align: center;
display: block;
/* footnote tips display */
clear: both;
padding-top: 10px;
}
ul.workbenches,
ul.addonslist {
overflow: hidden;
padding: 10px;
}
ul.workbenches li,
ul.addonslist li {
list-style: none;
float: left;
display: inline;
width: 50%;
}
.forum {
display: none;
/* forum display */
display: none; /* forum display */
/* don't change this line */
}
@@ -270,41 +351,23 @@ ul.addonslist li {
white-space: pre-wrap;
}
.thumbnails {
float: left;
width: 100%;
/* thumbs display */
/* don't change this line */
/* --- SCROLLBAR STYLE --- */
::-webkit-scrollbar {
width: 20px;
background: BASECOLOR;
padding: 2px;
}
.notes {
display: none;
/* notes display */
/* don't change this line */
float: right;
width: 30%;
}
#notepad {
width: 95%;
height: 100%;
color: TEXTCOLOR;
::-webkit-scrollbar-thumb {
background: BOXCOLOR;
border: none;
padding: 5px;
border-radius: 3px;
min-height: 300px;
-webkit-border-radius: 999px;
background-clip: content-box;
border: 6px solid transparent;
}
.iframe {
display: block;
margin: auto;
text-align: center;
width: 50%;
height: 100%;
}
.iframecontainer {
height: 90%;
::-webkit-scrollbar-thumb:hover {
background: TEXTCOLOR;
background-clip: content-box;
border: 6px solid transparent;
}

View File

@@ -12,22 +12,46 @@
</head>
<body onload="load()">
<div class="container">
<div class="title">
<div id="main-container">
<div id="title-bar">
<ul id="tabs" class="tabs">
<li>
<a id="htab1" class="active" onClick="toggle('tab1')" href="#">
<img src="IMAGE_SRC_ICON_DOCUMENTS" alt="documents">
T_DOCUMENTS
</a>
</li>
<li>
<a id="htab2" onClick="toggle('tab2')" href="#">
<img src="IMAGE_SRC_ICON_HELP" alt="help">
T_HELP
</a>
</li>
<li>
<a id="htab3" onClick="toggle('tab3')" href="#">
<img src="IMAGE_SRC_ICON_ACTIVITY" alt="activity">
T_ACTIVITY
</a>
</li>
<li>
<a href="https://blog.freecad.org/" title="T_BLOG_TOOLTIP">
<img src="IMAGE_SRC_ICON_BLOG" alt="blog">
T_BLOG
</a>
</li>
</ul>
<div class="version">
VERSIONSTRING
<a title="T_VTOOLTIP" href="OpenSettings.py">
<img class="settingsicon" src="IMAGE_SRC_SETTINGS" alt="T_VTOOLTIP">
</a>
</div>
<div style="flex-grow: 1"></div>
<div class="welcome">
<img src="IMAGE_SRC_FREECAD" alt="freecad">
<p>T_WELCOME</p>
</div>
</div>
<ul id="tabs" class="tabs">
<li><a id="htab1" class="active" onClick="toggle('tab1')" href="#">T_DOCUMENTS</a></li>
<li><a id="htab2" onClick="toggle('tab2')" href="#">T_HELP</a></li>
<li><a id="htab3" onClick="toggle('tab3')" href="#">T_ACTIVITY</a></li>
<li><a href="https://blog.freecad.org/" title="Link to the
FreeCAD blog">BLOG</a></li>
</ul>
<div id="tab1" class="panel">
<div class="thumbnails">
@@ -60,77 +84,77 @@ FreeCAD blog">BLOG</a></li>
</div>
<div id="tab2" class="panel hidden">
<div id="help-tab-wrapper">
<div class="docbox">
<div class="docbox">
<h2>T_GENERALDOCUMENTATION</h2>
<h2>T_GENERALDOCUMENTATION</h2>
<h3>
<img src="IMAGE_SRC_USERHUB" alt="T_USERHUB" />
<a href="https://www.freecad.org/wiki/User_hub">T_USERHUB</a>
</h3>
<p>T_DESCR_USERHUB</p>
<h3>
<img src="IMAGE_SRC_USERHUB" alt="T_USERHUB" />
<a href="https://www.freecad.org/wiki/User_hub">T_USERHUB</a>
</h3>
<p>T_DESCR_USERHUB</p>
<h3>
<img src="IMAGE_SRC_POWERHUB" alt="T_POWERHUB" />
<a href="https://www.freecad.org/wiki/Power_users_hub">T_POWERHUB</a>
</h3>
<p>T_DESCR_POWERHUB</p>
<h3>
<img src="IMAGE_SRC_POWERHUB" alt="T_POWERHUB" />
<a href="https://www.freecad.org/wiki/Power_users_hub">T_POWERHUB</a>
</h3>
<p>T_DESCR_POWERHUB</p>
<h3>
<img src="IMAGE_SRC_DEVHUB" alt="T_DEVHUB" />
<a href="https://www.freecad.org/wiki/Developer_hub">T_DEVHUB</a>
</h3>
<p>T_DESCR_DEVHUB</p>
<h3>
<img src="IMAGE_SRC_DEVHUB" alt="T_DEVHUB" />
<a href="https://www.freecad.org/wiki/Developer_hub">T_DEVHUB</a>
</h3>
<p>T_DESCR_DEVHUB</p>
<h3>
<img src="IMAGE_SRC_MANUAL" alt="T_MANUAL" />
<a href="https://www.freecad.org/wiki/Manual:Introduction">T_MANUAL</a>
</h3>
<p>T_DESCR_MANUAL</p>
<h3>
<img src="IMAGE_SRC_MANUAL" alt="T_MANUAL" />
<a href="https://www.freecad.org/wiki/Manual:Introduction">T_MANUAL</a>
</h3>
<p>T_DESCR_MANUAL</p>
</div>
<div class="docbox">
<h2>T_WBHELP</h2>
<p>T_DESCR_WBHELP</p>
UL_WORKBENCHES
</div>
<div class="docbox">
<h2>T_COMMUNITYHELP</h2>
<p>T_DESCR_COMMUNITYHELP1</p>
<p>T_DESCR_COMMUNITYHELP2</p>
<p>T_DESCR_COMMUNITYHELP3</p>
</div>
<div class="docbox">
<h2>T_ADDONS</h2>
<p>T_DESCR_ADDONS</p>
<div id="addons">T_OFFLINEPLACEHOLDER</div>
</div>
</div>
<div class="docbox">
<h2>T_WBHELP</h2>
<p>T_DESCR_WBHELP</p>
UL_WORKBENCHES
</div>
<div class="docbox">
<h2>T_COMMUNITYHELP</h2>
<p>T_DESCR_COMMUNITYHELP1</p>
<p>T_DESCR_COMMUNITYHELP2</p>
<p>T_DESCR_COMMUNITYHELP3</p>
</div>
<div class="docbox">
<h2>T_ADDONS</h2>
<p>T_DESCR_ADDONS</p>
<div id="addons">T_OFFLINEPLACEHOLDER</div>
</div>
<div class="footnote">
<b>T_TIP</b>: T_OFFLINEHELP
</div>
<div class="footnote">
<b>T_TIP</b>: T_EXTERNALLINKS
</div>
<div class="footnote">
<b>T_TIP</b>: T_OFFLINEHELP
</div>
<div class="footnote">
<b>T_TIP</b>: T_EXTERNALLINKS
</div>
</div>
<div id="tab3" class="panel tab3 hidden">

View File

@@ -253,7 +253,8 @@ def getDefaultIcon():
def build_new_file_card(template):
"builds an html <li> element representing a new file template"
"""builds an html <li> element representing a new file
quick start button"""
templates = {
"empty_file": [TranslationTexts.T_TEMPLATE_EMPTYFILE_NAME, TranslationTexts.T_TEMPLATE_EMPTYFILE_DESC],
@@ -270,7 +271,7 @@ def build_new_file_card(template):
image = 'file:///'+os.path.join(os.path.join(FreeCAD.getResourceDir(), "Mod", "Start", "StartPage"), 'images/new_'+template+".png").replace('\\','/')
result = ""
result += '<li class="icon-new-template">'
result += '<li class="quickstart-button-card">'
result += '<a href="LoadNew.py?template='+urllib.parse.quote(template)+'">'
result += '<img src="'+image+'" alt="'+template+'">'
result += '<div class="caption">'
@@ -303,7 +304,7 @@ def buildCard(filename,method,arg=None):
if finfo[5]:
infostring += "\n\n" + finfo[5]
if size:
result += '<li class="icon">'
result += '<li class="file-card">'
result += '<a href="'+method+urllib.parse.quote(arg)+'" title="'+infostring+'">'
result += '<img src="file:///'+image.replace('\\','/')+'" alt="'+basename+'">'
result += '<div class="caption">'
@@ -488,11 +489,16 @@ def handle():
# build IMAGE_SRC paths
HTML = HTML.replace("IMAGE_SRC_FREECAD",'file:///'+os.path.join(resources_dir, 'images/freecad.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_ICON_DOCUMENTS",'file:///'+os.path.join(resources_dir, 'images/icon_documents.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_ICON_HELP",'file:///'+os.path.join(resources_dir, 'images/icon_help.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_ICON_ACTIVITY",'file:///'+os.path.join(resources_dir, 'images/icon_activity.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_ICON_BLOG",'file:///'+os.path.join(resources_dir, 'images/icon_blog.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_USERHUB",'file:///'+os.path.join(resources_dir, 'images/userhub.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_POWERHUB",'file:///'+os.path.join(resources_dir, 'images/poweruserhub.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_DEVHUB",'file:///'+os.path.join(resources_dir, 'images/developerhub.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_MANUAL",'file:///'+os.path.join(resources_dir, 'images/manual.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_SETTINGS",'file:///'+os.path.join(resources_dir, 'images/settings.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_SETTINGS",'file:///'+os.path.join(resources_dir, 'images/icon_settings.png').replace('\\','/'))
HTML = HTML.replace("IMAGE_SRC_INSTALLED",'file:///'+os.path.join(resources_dir, 'images/installed.png').replace('\\','/'))
# build UL_WORKBENCHES

View File

@@ -35,9 +35,12 @@ def translate(context,text):
return u.replace(chr(39), "&rsquo;")
T_TITLE = translate("StartPage", "Start")
T_WELCOME = translate("StartPage", "Welcome to FreeCAD")
T_DOCUMENTS = translate("StartPage", "Documents")
T_HELP = translate("StartPage", "Help")
T_ACTIVITY = translate("StartPage", "Activity")
T_BLOG = translate("StartPage", "Blog")
T_BLOG_TOOLTIP = translate("StartPage", "Link to the FreeCAD blog")
T_NEWFILE = translate("StartPage", "New file")
T_TEMPLATE_EMPTYFILE_NAME = translate("StartPage", "Empty File")
T_TEMPLATE_EMPTYFILE_DESC = translate("StartPage", "Create an empty FreeCAD file")

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 865 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB