mirror of
https://github.com/lxsang/antos-frontend.git
synced 2025-07-15 13:30:01 +02:00
Rework on AntOS core to provide support to both mobile and desktop devices (experimental):
- Redesign the core UI API and tags to support Mobile devices - Add new StackMenu tag - Support touch events handling on touch devices - Redesign File and Setting to work on mobile - Improve Anouncement API - Rework on default themes
This commit is contained in:
DanyLE
@ -14,6 +14,9 @@ afx-app-window ul.afx-window-top{
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
padding:0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
afx-app-window ul.loading::before{
|
||||
@ -33,10 +36,12 @@ afx-app-window ul.loading::before {
|
||||
afx-app-window ul.afx-window-top li{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
afx-app-window ul li.afx-window-title{
|
||||
float:none;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
afx-app-window div.afx-window-content
|
||||
@ -81,8 +86,31 @@ afx-app-window div.afx-window-overlay {
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
afx-app-window div.afx-window-wrapper > afx-stack-menu.context {
|
||||
top: 42px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
afx-app-window ul.afx-window-top afx-button button{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 22px;
|
||||
margin-bottom: 0;
|
||||
padding:0px;
|
||||
background-color: transparent;
|
||||
border:0;
|
||||
border-radius: 0;
|
||||
}
|
||||
afx-app-window ul.afx-window-top afx-button afx-label i.icon-style{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 0px;
|
||||
border:0;
|
||||
}
|
||||
@ -1,7 +1,17 @@
|
||||
afx-button button{
|
||||
outline: none;
|
||||
min-height: 35px;
|
||||
min-width: 40px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
afx-button i.icon-style {
|
||||
float: left;
|
||||
}
|
||||
|
||||
afx-button afx-label i.icon-style {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1,5 +1,22 @@
|
||||
afx-apps-dock{
|
||||
float: left;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
afx-apps-dock afx-button button{
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
font-size: 22px;
|
||||
margin-bottom: 0;
|
||||
padding:0px;
|
||||
background-color: transparent;
|
||||
border:0;
|
||||
border-radius: 0;
|
||||
}
|
||||
afx-apps-dock afx-button afx-label i.icon-style{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 0px;
|
||||
border:0;
|
||||
}
|
||||
@ -39,6 +39,7 @@ afx-file-view afx-tree-view{
|
||||
margin:0;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
afx-file-view afx-tree-view .afx_tree_item_odd{
|
||||
@ -57,4 +58,47 @@ afx-file-view div.treecontainer{
|
||||
overflow: auto;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
|
||||
font-size: 22px;
|
||||
}
|
||||
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
afx-file-view afx-tree-view .afx-tree-view-item:before{
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
afx-file-view afx-grid-view i.file:before{
|
||||
font-size: 21px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
afx-file-view afx-grid-view i.dir:before{
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
afx-file-view afx-tree-view li.itemname{
|
||||
padding-left: 10px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
afx-file-view afx-label.status{
|
||||
font-size: 13px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
afx-file-view afx-label.status span{
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
afx-file-view afx-label.status i.label-text
|
||||
{
|
||||
padding-right: 5px;
|
||||
}
|
||||
@ -2,6 +2,11 @@ afx-grid-view afx-grid-row afx-grid-cell{
|
||||
user-select:none;
|
||||
-webkit-user-select:none;
|
||||
cursor:default;
|
||||
min-height: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
afx-grid-view .grid_row_header afx-grid-cell{
|
||||
@ -9,6 +14,11 @@ afx-grid-view .grid_row_header afx-grid-cell{
|
||||
-webkit-user-select:none;
|
||||
cursor:default;
|
||||
font-weight: bold;
|
||||
min-height: 25px;
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
afx-grid-view {
|
||||
@ -16,5 +26,21 @@ afx-grid-view {
|
||||
}
|
||||
|
||||
afx-grid-view afx-grid-cell afx-label {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
afx-grid-view .grid_row_header afx-grid-cell[sort = "asc"] span::before
|
||||
{
|
||||
content: "\F574";
|
||||
font-family: "bootstrap-icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
afx-grid-view .grid_row_header afx-grid-cell[sort = "desc"] span::before
|
||||
{
|
||||
content: "\F57B";
|
||||
font-family: "bootstrap-icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -5,6 +5,7 @@ afx-label span {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
afx-label i.label-text{
|
||||
font-weight: normal;
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
afx-list-view{
|
||||
.afx-list-view{
|
||||
overflow:hidden;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
afx-list-view afx-list-item
|
||||
|
||||
afx-list-view .afx-list-item
|
||||
{
|
||||
display: contents;
|
||||
}
|
||||
afx-list-view > div.list-container{
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
afx-list-view > div.list-container > ul{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
@ -17,12 +22,29 @@ afx-list-view > div.list-container > ul{
|
||||
|
||||
afx-list-view > div.list-container > ul li{
|
||||
margin:0;
|
||||
padding:0;
|
||||
min-height: 25px;
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
-webkit-user-select:none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
cursor:default;
|
||||
}
|
||||
afx-list-view > div.list-container > ul afx-dbline-list-item li{
|
||||
min-height: 40px;
|
||||
}
|
||||
.afx-list-view[dir='horizontal'] > div.list-container > ul
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
afx-list-view > div.list-container > ul li > i {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
afx-list-view i.closable{
|
||||
display: inline-block;
|
||||
@ -36,6 +58,7 @@ afx-list-view i.closable:before{
|
||||
content: "\f00d";
|
||||
font-family: "FontAwesome";
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
afx-list-view.dropdown {
|
||||
@ -44,17 +67,43 @@ afx-list-view.dropdown {
|
||||
}
|
||||
afx-list-view.dropdown > div.list-container{
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
}
|
||||
afx-list-view.dropdown > div.list-container > div
|
||||
{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
afx-list-view.dropdown > div.list-container > ul{
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 200px;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
afx-list-view.dropdown > div.list-container > ul li{
|
||||
display: inline-block;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
afx-list-view afx-list-item afx-label {
|
||||
display: inline-block;
|
||||
afx-list-view.dropdown div.list-container div:before {
|
||||
content: "\f107";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
afx-list-view.dropdown div.list-container div > afx-label{
|
||||
padding-left:3px;
|
||||
}
|
||||
afx-list-view div.button_container afx-button button
|
||||
{
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
}
|
||||
@ -85,4 +85,36 @@ afx-menu li.afx-corner-fix:hover{
|
||||
}
|
||||
afx-menu ul.context li{
|
||||
clear:float;
|
||||
min-width: 150px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
afx-menu afx-switch span{
|
||||
padding-top: 3px;
|
||||
font-size: 16px;
|
||||
height: 19px;
|
||||
}
|
||||
afx-menu span.shortcut{
|
||||
text-align: right;
|
||||
margin-left: 3px;
|
||||
}
|
||||
afx-menu ul li /*, afx-menu ul >afx-menu-entry > li*/{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
afx-menu afx-menu li{
|
||||
min-width: 150px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before{
|
||||
content: "\f054";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 10px;
|
||||
right:5px;
|
||||
position:absolute;
|
||||
top:25%;
|
||||
}
|
||||
|
||||
afx-menu afx-label span {
|
||||
height: 22px !important;
|
||||
}
|
||||
@ -6,25 +6,36 @@ afx-nspinner ul{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 40px;
|
||||
}
|
||||
afx-nspinner input{
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: calc(100% - 40px);
|
||||
flex: 1;
|
||||
}
|
||||
afx-nspinner ul li{
|
||||
display: block;
|
||||
display: flex;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
afx-nspinner ul li.incr i:before{
|
||||
content: "\f0d8";
|
||||
font-family: "FontAwesome";
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
afx-nspinner ul li.decr i:before{
|
||||
content: "\f0d7";
|
||||
font-family: "FontAwesome";
|
||||
font-style: normal;
|
||||
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -20,4 +20,5 @@ afx-slider div.progress {
|
||||
|
||||
afx-slider div.dragpoint {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
51
src/themes/system/afx-stack-menu.css
Normal file
51
src/themes/system/afx-stack-menu.css
Normal file
@ -0,0 +1,51 @@
|
||||
afx-stack-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
afx-stack-menu .afx-list-view
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
afx-stack-menu > afx-button button
|
||||
{
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
afx-stack-menu > afx-button .label-text
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
afx-stack-menu.context
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 1000000;
|
||||
}
|
||||
afx-stack-menu.context .afx-list-view > div.list-container
|
||||
{
|
||||
overflow: unset;
|
||||
}
|
||||
afx-stack-menu-item div
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
afx-stack-menu-item afx-label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
afx-stack-menu-item .shortcut
|
||||
{
|
||||
margin-left: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
afx-stack-menu-item .afx-submenu:before
|
||||
{
|
||||
content: "\f054";
|
||||
font-family: "FontAwesome";
|
||||
margin-left: 5px;
|
||||
}
|
||||
@ -2,17 +2,26 @@
|
||||
afx-sys-panel{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
afx-sys-panel > div{
|
||||
width: 100%;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
position:absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
afx-sys-panel afx-overlay
|
||||
{
|
||||
width: 400px;
|
||||
bottom: 35px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
afx-sys-panel > div.loading::before{
|
||||
background-color: orangered;
|
||||
@ -24,7 +33,7 @@ afx-sys-panel > div.loading::before{
|
||||
|
||||
afx-sys-panel > div.loading::before {
|
||||
right: 0;
|
||||
bottom:0;
|
||||
top:0;
|
||||
animation: sys-loading 1s linear infinite;
|
||||
}
|
||||
|
||||
@ -59,12 +68,10 @@ afx-sys-panel > div.loading::before {
|
||||
afx-sys-panel .afx-panel-os-menu {
|
||||
padding:0;
|
||||
margin: 0;
|
||||
float:left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
afx-sys-panel .afx-panel-os-stray{
|
||||
float:right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -83,13 +90,6 @@ afx-sys-panel afx-menu.afx-panel-os-stray afx-menu afx-menu{
|
||||
top:-4px;
|
||||
}
|
||||
|
||||
afx-sys-panel afx-overlay
|
||||
{
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
|
||||
{
|
||||
width: 100%;
|
||||
@ -98,8 +98,45 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
afx-sys-panel afx-list-view[data-id="applist"] afx-label span,
|
||||
afx-sys-panel afx-list-view[data-id="catlist"] afx-label span
|
||||
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul
|
||||
{
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li{
|
||||
/*display: block;*/
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
justify-content: normal !important;
|
||||
}
|
||||
|
||||
afx-sys-panel afx-list-view[data-id="applist"] i{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
afx-sys-panel afx-list-view[data-id="applist"] i.label-text{
|
||||
word-break: break-word;
|
||||
font-size: 14px;
|
||||
}
|
||||
afx-sys-panel afx-list-view[data-id="applist"] i.icon-style {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
afx-sys-panel afx-list-view[data-id="applist"] afx-label span
|
||||
{
|
||||
flex-direction: column;
|
||||
}
|
||||
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
afx-sys-panel afx-list-view[data-id="applist"]> div.list-container > ul .afx-list-item:nth-child(even) li
|
||||
{
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -7,12 +7,26 @@ afx-tab-bar afx-list-view {
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
afx-tab-bar afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li
|
||||
afx-tab-bar afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li,
|
||||
afx-tab-bar afx-list-view > div.list-container > ul li
|
||||
{
|
||||
background-color: transparent;
|
||||
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
afx-tab-bar afx-list-view > div.list-container > ul li{
|
||||
float:left;
|
||||
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
afx-tab-bar afx-list-view > div.list-container > ul li afx-label i.label-text
|
||||
{
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -15,6 +15,14 @@ afx-tree-view li{
|
||||
list-style: none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
min-height: 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
afx-tree-view li.itemname
|
||||
{
|
||||
padding-left: 10px;
|
||||
}
|
||||
afx-tree-view div{
|
||||
-webkit-user-select:none;
|
||||
@ -28,8 +36,19 @@ afx-tree-view i.icon-style {
|
||||
afx-tree-view .afx-tree-view-folder-open:before{
|
||||
content: "\f147";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 22px;
|
||||
}
|
||||
afx-tree-view .afx-tree-view-folder-close:before{
|
||||
content: "\f196";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 22px;
|
||||
}
|
||||
afx-tree-view div{
|
||||
padding-left:3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
afx-tree-view i.icon-style {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
@ -4,6 +4,16 @@ html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
#desktop > div > ul afx-list-item {
|
||||
width: 70px;
|
||||
padding:3px;
|
||||
}
|
||||
#desktop > div > ul afx-list-item li
|
||||
{
|
||||
padding: 3px;
|
||||
}
|
||||
body
|
||||
{
|
||||
@ -28,7 +38,8 @@ body
|
||||
#workspace {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
bottom: 35px;
|
||||
}
|
||||
|
||||
#desktop{
|
||||
@ -39,6 +50,9 @@ body
|
||||
user-select:none;
|
||||
cursor: default;
|
||||
padding:0px;
|
||||
overflow: hidden;
|
||||
top:0;
|
||||
left: 0;
|
||||
}
|
||||
#desktop > div > ul afx-list-item {
|
||||
display:block;
|
||||
|
||||
Reference in New Issue
Block a user