시나리오 관리 추가
This commit is contained in:
현성필
+61
@@ -0,0 +1,61 @@
|
||||
package com.eactive.httpmockserver.client.controller;
|
||||
|
||||
import com.eactive.httpmockserver.client.dto.ApiScenarioDTO;
|
||||
import com.eactive.httpmockserver.client.entity.ApiScenario;
|
||||
import com.eactive.httpmockserver.client.mapper.ApiScenarioMapper;
|
||||
import com.eactive.httpmockserver.client.service.ApiScenarioMgmtService;
|
||||
import com.eactive.httpmockserver.common.util.SecurityUtil;
|
||||
import com.eactive.httpmockserver.user.entity.StaffUser;
|
||||
import com.eactive.httpmockserver.user.service.UserService;
|
||||
import org.springframework.http.HttpStatus;
|
||||
import org.springframework.http.ResponseEntity;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@RestController
|
||||
@RequestMapping("/mgmt/api_scenario")
|
||||
public class ApiScenarioMgmtController {
|
||||
|
||||
private final ApiScenarioMgmtService apiScenarioMgmtService;
|
||||
|
||||
private final ApiScenarioMapper apiScenarioMapper;
|
||||
|
||||
private final UserService userService;
|
||||
|
||||
public ApiScenarioMgmtController(ApiScenarioMgmtService apiScenarioMgmtService, ApiScenarioMapper apiScenarioMapper, UserService userService) {
|
||||
this.apiScenarioMgmtService = apiScenarioMgmtService;
|
||||
this.apiScenarioMapper = apiScenarioMapper;
|
||||
this.userService = userService;
|
||||
}
|
||||
|
||||
@GetMapping("/list.do")
|
||||
public ResponseEntity<List<ApiScenarioDTO>> listScenarios() {
|
||||
List<ApiScenario> scenarios = apiScenarioMgmtService.findAll();
|
||||
return ResponseEntity.ok(apiScenarioMapper.toDtoList(scenarios));
|
||||
}
|
||||
|
||||
@PostMapping("/create.do")
|
||||
public ResponseEntity<ApiScenarioDTO> createScenario(@RequestBody ApiScenarioDTO apiScenarioDto) {
|
||||
ApiScenario apiScenario = apiScenarioMapper.map(apiScenarioDto);
|
||||
StaffUser user = userService.findByEsntlId(SecurityUtil.getCurrentUserEsntlId());
|
||||
apiScenario.setOwner(user);
|
||||
ApiScenario createdScenario = apiScenarioMgmtService.createApiScenario(apiScenario);
|
||||
return new ResponseEntity<>(apiScenarioMapper.map(createdScenario), HttpStatus.CREATED);
|
||||
}
|
||||
|
||||
|
||||
@PutMapping("/update.do")
|
||||
public ResponseEntity<ApiScenarioDTO> updateScenario(@RequestBody ApiScenarioDTO apiScenarioDto) {
|
||||
ApiScenario updatedApiScenario = apiScenarioMapper.map(apiScenarioDto);
|
||||
ApiScenario updatedScenario = apiScenarioMgmtService.updateApiScenario(apiScenarioDto.getId(), updatedApiScenario);
|
||||
return ResponseEntity.ok(apiScenarioMapper.map(updatedScenario));
|
||||
}
|
||||
|
||||
@PostMapping("/delete.do")
|
||||
public ResponseEntity<Void> deleteScenario(@RequestBody ApiScenarioDTO apiScenarioDto) {
|
||||
apiScenarioMgmtService.deleteApiScenario(apiScenarioDto.getId());
|
||||
return ResponseEntity.ok().build();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
package com.eactive.httpmockserver.client.dto;
|
||||
|
||||
public class ApiScenarioDTO {
|
||||
|
||||
private String id;
|
||||
|
||||
private String name;
|
||||
|
||||
private String description;
|
||||
|
||||
private String scenario;
|
||||
|
||||
public String getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
public void setId(String id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public String getName() {
|
||||
return name;
|
||||
}
|
||||
|
||||
public void setName(String name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
public String getDescription() {
|
||||
return description;
|
||||
}
|
||||
|
||||
public void setDescription(String description) {
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
public String getScenario() {
|
||||
return scenario;
|
||||
}
|
||||
|
||||
public void setScenario(String scenario) {
|
||||
this.scenario = scenario;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
package com.eactive.httpmockserver.client.entity;
|
||||
|
||||
import com.eactive.httpmockserver.user.entity.StaffUser;
|
||||
|
||||
import javax.persistence.*;
|
||||
|
||||
@Entity
|
||||
@Table(name = "API_SCENARIO")
|
||||
public class ApiScenario {
|
||||
|
||||
@Id
|
||||
private String id; //uuid
|
||||
|
||||
private String name;
|
||||
|
||||
private String description;
|
||||
|
||||
@ManyToOne
|
||||
@JoinColumn(name = "USER_ID")
|
||||
private StaffUser owner;
|
||||
|
||||
@Lob
|
||||
private String scenario;
|
||||
|
||||
public String getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
public void setId(String id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public String getName() {
|
||||
return name;
|
||||
}
|
||||
|
||||
public void setName(String name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
public String getDescription() {
|
||||
return description;
|
||||
}
|
||||
|
||||
public void setDescription(String description) {
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
public String getScenario() {
|
||||
return scenario;
|
||||
}
|
||||
|
||||
public void setScenario(String scenario) {
|
||||
this.scenario = scenario;
|
||||
}
|
||||
|
||||
public StaffUser getOwner() {
|
||||
return owner;
|
||||
}
|
||||
|
||||
public void setOwner(StaffUser owner) {
|
||||
this.owner = owner;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
package com.eactive.httpmockserver.client.mapper;
|
||||
|
||||
import com.eactive.httpmockserver.client.dto.ApiScenarioDTO;
|
||||
import com.eactive.httpmockserver.client.entity.ApiScenario;
|
||||
import org.mapstruct.Mapper;
|
||||
import org.mapstruct.ReportingPolicy;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@Mapper(componentModel = "spring",
|
||||
unmappedTargetPolicy = ReportingPolicy.IGNORE)
|
||||
@Component
|
||||
public interface ApiScenarioMapper {
|
||||
|
||||
ApiScenario map(ApiScenarioDTO dto);
|
||||
|
||||
ApiScenarioDTO map(ApiScenario scenario);
|
||||
|
||||
List<ApiScenarioDTO> toDtoList(List<ApiScenario> scenarios);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
package com.eactive.httpmockserver.client.repository;
|
||||
|
||||
import com.eactive.httpmockserver.client.entity.ApiScenario;
|
||||
import com.eactive.httpmockserver.user.entity.StaffUser;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
public interface ApiScenarioRepository extends JpaRepository<ApiScenario, String>, JpaSpecificationExecutor<ApiScenario> {
|
||||
|
||||
List<ApiScenario> findAllByOwner(StaffUser owner);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
package com.eactive.httpmockserver.client.service;
|
||||
|
||||
import com.eactive.httpmockserver.client.entity.ApiScenario;
|
||||
import com.eactive.httpmockserver.client.repository.ApiScenarioRepository;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import javax.transaction.Transactional;
|
||||
import java.util.List;
|
||||
import java.util.UUID;
|
||||
|
||||
@Service
|
||||
@Transactional
|
||||
public class ApiScenarioMgmtService {
|
||||
|
||||
@Autowired
|
||||
ApiScenarioRepository apiScenarioRepository;
|
||||
|
||||
|
||||
public List<ApiScenario> findAll() {
|
||||
return apiScenarioRepository.findAll();
|
||||
}
|
||||
|
||||
public ApiScenario createApiScenario(ApiScenario apiScenario) {
|
||||
apiScenario.setId(UUID.randomUUID().toString());
|
||||
return apiScenarioRepository.save(apiScenario);
|
||||
}
|
||||
|
||||
|
||||
public ApiScenario updateApiScenario(String id, ApiScenario updatedApiScenario) {
|
||||
return apiScenarioRepository.findById(id)
|
||||
.map(apiScenario -> {
|
||||
apiScenario.setName(updatedApiScenario.getName());
|
||||
apiScenario.setDescription(updatedApiScenario.getDescription());
|
||||
apiScenario.setScenario(updatedApiScenario.getScenario());
|
||||
return apiScenarioRepository.save(apiScenario);
|
||||
}).orElseGet(() -> {
|
||||
// If the ApiScenario with the given id doesn't exist, create a new one
|
||||
updatedApiScenario.setId(id);
|
||||
return apiScenarioRepository.save(updatedApiScenario);
|
||||
});
|
||||
}
|
||||
|
||||
// Delete operation
|
||||
public void deleteApiScenario(String id) {
|
||||
apiScenarioRepository.deleteById(id);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import org.springframework.boot.web.servlet.error.ErrorController;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.ModelMap;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
|
||||
import javax.servlet.RequestDispatcher;
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
@@ -23,4 +24,16 @@ public class PortalErrorController implements ErrorController {
|
||||
return "redirect:/";
|
||||
}
|
||||
|
||||
@PostMapping("/error")
|
||||
public String handleErrorPost(HttpServletRequest request, ModelMap model) {
|
||||
Object status = request.getAttribute(RequestDispatcher.ERROR_STATUS_CODE);
|
||||
|
||||
if (status != null) {
|
||||
model.addAttribute("status", status);
|
||||
return "error";
|
||||
}
|
||||
|
||||
return "redirect:/";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -6,6 +6,13 @@ body {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:root {
|
||||
--border-color: #cacaca;
|
||||
--background-color: #ffffff;
|
||||
|
||||
--background-box-title: #f7f7f7;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000 !important;
|
||||
text-decoration: none !important;
|
||||
@@ -52,6 +59,7 @@ a.btn.btn-primary {
|
||||
color: #fff !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #39077A;
|
||||
border-color: #39077A;
|
||||
@@ -63,7 +71,7 @@ a.btn.btn-primary {
|
||||
}
|
||||
|
||||
.list-group-item.active > a {
|
||||
color : #fff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
|
||||
@@ -525,7 +533,7 @@ a.btn.btn-primary {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-width: 1170px;
|
||||
background-color : #D4ECF1;
|
||||
background-color: #D4ECF1;
|
||||
}
|
||||
|
||||
.pt-masthead h1 {
|
||||
@@ -638,13 +646,13 @@ a.btn.btn-primary {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 849px){
|
||||
@media (max-width: 849px) {
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 850px){
|
||||
@media (min-width: 850px) {
|
||||
.main_menu {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -680,23 +688,19 @@ a.btn.btn-primary {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.pt-links {
|
||||
top: 5rem;
|
||||
display: block !important;
|
||||
height: calc(100vh - 7rem);
|
||||
padding-left: .25rem;
|
||||
margin-left: -.25rem;
|
||||
overflow-y: auto
|
||||
}
|
||||
.pt-links {
|
||||
top: 5rem;
|
||||
display: block !important;
|
||||
height: calc(100vh - 7rem);
|
||||
padding-left: .25rem;
|
||||
margin-left: -.25rem;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.pt-links > ul {
|
||||
padding: 1.5rem .75rem;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #e9ecef
|
||||
}
|
||||
.pt-links > ul {
|
||||
/*padding: 1.5rem .75rem;*/
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #e9ecef
|
||||
}
|
||||
|
||||
.pt-links a {
|
||||
@@ -756,6 +760,123 @@ a.btn.btn-primary {
|
||||
color: rgba(0, 0, 0, 0.85)
|
||||
}
|
||||
|
||||
.full-screen {
|
||||
background-color: #ffffff;
|
||||
position: fixed; /* Fixed position to cover the whole screen */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw; /* Full viewport width */
|
||||
height: 100vh; /* Full viewport height */
|
||||
z-index: 9999; /* High z-index to be on top of other content */
|
||||
overflow: auto; /* Add scroll for overflowing content */
|
||||
}
|
||||
|
||||
.api-tester-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.api-tester-layout .tester {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.api-scenario, .api-catalog, .api-tester {
|
||||
transition: transform 0.5s ease; /* Add transition to each child */
|
||||
min-height: 100px; /* Adjust as needed */
|
||||
}
|
||||
|
||||
.api-catalog {
|
||||
flex: 0 0 200px; /* Fixed width, not flexible */
|
||||
/*order: 1; !* Keep the catalog in the middle *!*/
|
||||
}
|
||||
|
||||
.api-scenario {
|
||||
flex: 1; /* Flexible size */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.api-scenario-toolbar {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.api-scenario .api-scenario-sidebar {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.tester-toolbar {
|
||||
height: 40px;
|
||||
background: rgba(0, 0, 0, .03);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.api-scenario .api-scenario-view {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
width: calc(100vw - 400px);
|
||||
}
|
||||
|
||||
.api-scenario .api-scenario-content {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.api-scenario .api-scenario-content .api-scenario-editor {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scenario_editor {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fullHeight {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.halfHeight {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.api-scenario-output {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.api-scenario-output-header {
|
||||
height: 50px;
|
||||
border: 1px solid grey;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.api-scenario-output-body {
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
border: 1px solid grey;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
.api-tester {
|
||||
flex: 1; /* Flexible size */
|
||||
order: 2; /* Positions to the right of .api-catalog */
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.pt-layout {
|
||||
display: grid;
|
||||
@@ -1452,13 +1573,14 @@ footer div.foot_info span {
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
|
||||
@media(max-width: 1459px){
|
||||
.header{
|
||||
@media (max-width: 1459px) {
|
||||
.header {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1460px){
|
||||
.header{
|
||||
|
||||
@media (min-width: 1460px) {
|
||||
.header {
|
||||
max-width: 1460px !important;
|
||||
}
|
||||
}
|
||||
@@ -1467,7 +1589,7 @@ footer div.foot_info span {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media(max-width: 1919px){
|
||||
@media (max-width: 1919px) {
|
||||
|
||||
.figure_img {
|
||||
width: 100%;
|
||||
@@ -1477,7 +1599,8 @@ footer div.foot_info span {
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1920px){
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.figure_img {
|
||||
width: 1900px;
|
||||
display: block;
|
||||
@@ -1589,7 +1712,10 @@ footer div.foot_info span {
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
position: fixed !important;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: auto !important;
|
||||
z-index: 1000;
|
||||
}
|
||||
@@ -1615,17 +1741,17 @@ footer div.foot_info span {
|
||||
}
|
||||
|
||||
.dev {
|
||||
background-color : #f74140 !important;
|
||||
color : white !important;
|
||||
background-color: #f74140 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.prod {
|
||||
background-color : #49cc90 !important;
|
||||
color : white !important;
|
||||
background-color: #49cc90 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.current {
|
||||
color : #39077A !important;
|
||||
color: #39077A !important;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
@@ -1641,4 +1767,223 @@ footer div.foot_info span {
|
||||
/* Style the icon */
|
||||
display: inline-block;
|
||||
margin-right: 5px; /* Adjust this value as per your requirement */
|
||||
}
|
||||
|
||||
#drawflow {
|
||||
position: relative;
|
||||
width: calc(100vw - 440px);
|
||||
height: calc(100vh - 520px);
|
||||
background: var(--background-color);
|
||||
background-size: 25px 25px;
|
||||
background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.drag-drawflow {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-left: 20px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node {
|
||||
background: var(--background-color);
|
||||
/*border: 1px solid var(--border-color);*/
|
||||
-webkit-box-shadow: 0 2px 15px 2px var(--border-color);
|
||||
box-shadow: 0 2px 15px 2px var(--border-color);
|
||||
/*padding: 0px;*/
|
||||
/*width: 200px;*/
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node.selected {
|
||||
background: white;
|
||||
border: 1px solid #4ea9ff;
|
||||
-webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
|
||||
box-shadow: 0 2px 20px 2px #4ea9ff;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node.start {
|
||||
width: 100px; /* or any size */
|
||||
height: 100px; /* should be the same as width for a perfect diamond */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node.api {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node.api .output {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node.api .input {
|
||||
left: -10px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node.selected .title-box {
|
||||
color: #22598c;
|
||||
}
|
||||
|
||||
.drawflow .connection .main-path {
|
||||
stroke: #4ea9ff;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
/*.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {*/
|
||||
/* height: 15px;*/
|
||||
/* width: 15px;*/
|
||||
/* border: 2px solid var(--border-color);*/
|
||||
/*}*/
|
||||
|
||||
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
|
||||
background: #4ea9ff;
|
||||
}
|
||||
|
||||
/*.drawflow .drawflow-node .output {*/
|
||||
/* right: 10px;*/
|
||||
/*}*/
|
||||
|
||||
/*.drawflow .drawflow-node .input {*/
|
||||
/* left: -10px;*/
|
||||
/* background: white;*/
|
||||
/*}*/
|
||||
|
||||
.drawflow > .drawflow-delete {
|
||||
border: 2px solid #43b993;
|
||||
background: white;
|
||||
color: #43b993;
|
||||
-webkit-box-shadow: 0 2px 20px 2px #43b993;
|
||||
box-shadow: 0 2px 20px 2px #43b993;
|
||||
}
|
||||
|
||||
.drawflow-delete {
|
||||
border: 2px solid #4ea9ff;
|
||||
background: white;
|
||||
color: #4ea9ff;
|
||||
-webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
|
||||
box-shadow: 0 2px 20px 2px #4ea9ff;
|
||||
}
|
||||
|
||||
.drawflow-node .title-box {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: var(--background-box-title);
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.drawflow .title-box svg {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
.drawflow-node .box {
|
||||
padding: 10px 20px 20px 20px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
|
||||
}
|
||||
|
||||
.drawflow-node .box p {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
.drawflow-node input, .drawflow-node select, .drawflow-node textarea {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
width: 158px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.drawflow-node textarea {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
.drawflow .connection .point {
|
||||
stroke: var(--border-color);
|
||||
stroke-width: 2;
|
||||
fill: white;
|
||||
|
||||
}
|
||||
|
||||
.drawflow .connection .point.selected, .drawflow .connection .point:hover {
|
||||
fill: #4ea9ff;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 1px solid #0e5ba3;
|
||||
background: #4ea9ff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 85px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 1px solid #96015b;
|
||||
background: #e3195a;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.btn-lock {
|
||||
float: right;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 140px;
|
||||
display: flex;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
background: #555555;
|
||||
border-radius: 4px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bar-zoom {
|
||||
float: right;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
background: #555555;
|
||||
border-radius: 4px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.bar-zoom svg {
|
||||
cursor: pointer;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.bar-zoom svg:nth-child(1) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
require.config({paths: {'vs': '/plugins/vs'}});
|
||||
|
||||
class APIScenario {
|
||||
|
||||
constructor() {
|
||||
this.scenarioList = [];
|
||||
this.scenarioTab = [];
|
||||
this.currentIndex = -1;
|
||||
this.currentScenario = null;
|
||||
}
|
||||
|
||||
init() {
|
||||
console.log('init');
|
||||
this.loadScenarioList();
|
||||
require(['vs/editor/editor.main'], () => {
|
||||
this.outputEditor = monaco.editor.create(document.getElementById('output'), {
|
||||
value: '',
|
||||
language: 'text/plain',
|
||||
theme: 'vs-light',
|
||||
automaticLayout: true
|
||||
});
|
||||
});
|
||||
this.bindEvents();
|
||||
|
||||
let id = document.getElementById('drawflow');
|
||||
this.editor = new Drawflow(id);
|
||||
this.editor.reroute = true;
|
||||
this.editor.reroute_fix_curvature = true;
|
||||
this.editor.force_first_input = true;
|
||||
this.editor.start();
|
||||
let start = `
|
||||
<div>
|
||||
<div><i class="fas fa-play"></i> Start </div>
|
||||
</div>
|
||||
`;
|
||||
this.editor.on('connectionCreated', (connection) => {
|
||||
console.log('Connection created');
|
||||
console.log(connection);
|
||||
});
|
||||
this.showOutput = true;
|
||||
|
||||
this.editor.addNode('Start', 0, 1, 100, 100, 'start', {}, start);
|
||||
|
||||
}
|
||||
|
||||
loadScenarioList() {
|
||||
const me = this;
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: '/mgmt/api_scenario/list.do',
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
success: function (data) {
|
||||
me.scenarioList = data;
|
||||
},
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function () {
|
||||
me.renderScenarioList();
|
||||
me.hideLoadingOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getScenarioList() {
|
||||
return this.scenarioList;
|
||||
}
|
||||
|
||||
openScenario(event) {
|
||||
event.preventDefault();
|
||||
let scenarioId = $(event.target).closest('li').data('id');
|
||||
let scenario = this.getScenario(scenarioId);
|
||||
this.openTab(scenario);
|
||||
}
|
||||
|
||||
openTab(scenario) {
|
||||
console.log('openTab');
|
||||
console.log(scenario);
|
||||
this.currentScenario = scenario;
|
||||
let openTab = this.scenarioTab.find((tab) => tab.id === scenario.id);
|
||||
if (openTab) {
|
||||
this.currentIndex = this.scenarioTab.indexOf(openTab);
|
||||
//$(`#api_scenario_tab_${id}`).tab('show'); // API request 탭 활성화
|
||||
} else {
|
||||
this.scenarioTab.push(scenario);
|
||||
this.renderScenarioTab(scenario);
|
||||
}
|
||||
}
|
||||
|
||||
renderScenarioTab(scenario) {
|
||||
this.renderTabHeader(scenario);
|
||||
this.renderTabContent(scenario);
|
||||
}
|
||||
|
||||
renderTabHeader(scenario) {
|
||||
console.log('renderTabHeader');
|
||||
|
||||
}
|
||||
|
||||
renderTabContent(scenario) {
|
||||
console.log('renderTabContent')
|
||||
|
||||
}
|
||||
|
||||
getScenario(scenarioId) {
|
||||
return this.getScenarioList().find((scenario) => scenario.id === scenarioId);
|
||||
|
||||
}
|
||||
|
||||
showLoadingOverlay() {
|
||||
$("#loading-overlay").show();
|
||||
}
|
||||
|
||||
hideLoadingOverlay() {
|
||||
$("#loading-overlay").hide();
|
||||
}
|
||||
|
||||
showNewScenarioModal() {
|
||||
$('#new_scenario_modal').find('input').val('');
|
||||
$('#new_scenario_modal').modal('show');
|
||||
}
|
||||
|
||||
saveScenario() {
|
||||
const name = $('#new_scenario_name').val();
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: '/mgmt/api_scenario/create.do',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({name: name, scenario: "", description: ""}),
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function () {
|
||||
me.loadScenarioList();
|
||||
me.hideLoadingOverlay();
|
||||
$('#new_scenario_modal').modal('hide');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
removeScenario(scenarioId) {
|
||||
|
||||
}
|
||||
|
||||
toggleOutput() {
|
||||
// Define your selectors as constants for easy changes and better readability
|
||||
const scenarioContentSelector = '.api-scenario-content';
|
||||
const scenarioOutputSelector = '.api-scenario-output';
|
||||
const scenarioOutputBodySelector = '.api-scenario-output-body';
|
||||
const drawflowSelector = '#drawflow';
|
||||
const scenarioEditorSelector = '.scenario_editor';
|
||||
|
||||
// Ensure parentHeight is a number
|
||||
let parentHeight = parseInt($(scenarioContentSelector).css('height'), 10);
|
||||
|
||||
// Toggle the showOutput state
|
||||
this.showOutput = !this.showOutput;
|
||||
|
||||
if (!this.showOutput) {
|
||||
$(scenarioOutputSelector).css('flex', '0');
|
||||
$(scenarioOutputBodySelector).hide();
|
||||
|
||||
let editorHeight = $(scenarioEditorSelector).css('height');
|
||||
$(drawflowSelector).css('height', editorHeight);
|
||||
$(scenarioOutputSelector).removeClass('halfHeight');
|
||||
$(drawflowSelector).removeClass('halfHeight');
|
||||
} else {
|
||||
$(scenarioOutputSelector).css('flex', '1');
|
||||
$(scenarioOutputSelector).addClass('halfHeight');
|
||||
$(scenarioOutputBodySelector).show();
|
||||
$(drawflowSelector).addClass('halfHeight');
|
||||
$(drawflowSelector).css('height', parentHeight / 2);
|
||||
}
|
||||
|
||||
// Adjustments for when parentHeight isn't a valid number
|
||||
if (isNaN(parentHeight)) {
|
||||
console.error('parentHeight is not a number. Check the height of the api-scenario-content element.');
|
||||
// Fallback or additional error handling can be placed here
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
resizeEditor() {
|
||||
//FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출
|
||||
this.outputEditor.layout({
|
||||
width: 0
|
||||
});
|
||||
this.outputEditor.layout({});
|
||||
|
||||
}
|
||||
|
||||
runScript() {
|
||||
let graph = APIScenarioExecutor.extractGraphFromStart(this.editor.export().drawflow.Home.data);
|
||||
this.executor = new APIScenarioExecutor(graph);
|
||||
this.outputEditor.setValue(JSON.stringify(graph, null, 4));
|
||||
}
|
||||
|
||||
runScenarioAll() {
|
||||
if (!this.executor) {
|
||||
this.runScript();
|
||||
}
|
||||
this.executor.executeAll();
|
||||
}
|
||||
|
||||
|
||||
runScenarioStep() {
|
||||
if (!this.executor) {
|
||||
this.runScript();
|
||||
}
|
||||
this.executor.executeCurrentNode();
|
||||
this.executor.moveToNextNode();
|
||||
}
|
||||
|
||||
resetScenario() {
|
||||
|
||||
}
|
||||
|
||||
pauseScenario() {
|
||||
|
||||
}
|
||||
|
||||
stopScenario() {
|
||||
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
const events = [
|
||||
{type: 'click', selector: '.open_scenario', action: this.openScenario.bind(this)},
|
||||
{type: 'click', selector: '.export', action: this.runScript.bind(this)},
|
||||
{type: 'click', selector: '.toggle_output', action: this.toggleOutput.bind(this)},
|
||||
{type: 'click', selector: '.run_scenario_step', action: this.runScenarioStep.bind(this)},
|
||||
{type: 'click', selector: '.run_scenario_all', action: this.runScenarioAll.bind(this)},
|
||||
{type: 'click', selector: '.reset_scenario', action: this.resetScenario.bind(this)},
|
||||
{type: 'click', selector: '.pause_scenario', action: this.pauseScenario.bind(this)},
|
||||
{type: 'click', selector: '.stop_scenario', action: this.stopScenario.bind(this)},
|
||||
{type: 'click', selector: '#new_scenario', action: this.showNewScenarioModal.bind(this)},
|
||||
{type: 'click', selector: '.save_scenario', action: this.saveScenario.bind(this)},
|
||||
];
|
||||
|
||||
for (let event of events) {
|
||||
$(document).on(event.type, event.selector, event.action);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', this.resizeEditor.bind(this));
|
||||
var me = this;
|
||||
|
||||
$('#drawflow').droppable({
|
||||
drop: function (event, ui) {
|
||||
const x = ui.offset.left - $(this).offset().left;
|
||||
const y = ui.offset.top - $(this).offset().top;
|
||||
|
||||
const dataset = ui.draggable[0].dataset;
|
||||
var node = `<div><div class="title-box">API</div><div class="box">${dataset.name}</div></div>`;
|
||||
|
||||
me.editor.addNode(dataset.name, 1, 1, x, y, dataset.nodeType, dataset, node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
scenarioListTemplate(scenario) {
|
||||
return `
|
||||
<li class="d-flex justify-content-between " data-id="${scenario.id}">
|
||||
<a href="#" class="d-inline-flex align-items-center rounded open_scenario">${scenario.name}</a>
|
||||
<div class="d-flex justify-content-between">
|
||||
<button class="p-1 reset-button edit_scenario"><i class="fa fa-sharp fa-file-edit"></i></button>
|
||||
<button class="p-1 reset-button delete_scenario"><i class="fa fa-trash-can"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
renderScenarioList() {
|
||||
let scenarioList = this.getScenarioList();
|
||||
let scenarioListHtml = scenarioList.map((scenario) => this.scenarioListTemplate(scenario)).join('');
|
||||
$('.api-scenario-list').html(scenarioListHtml);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
class APIScenarioExecutor {
|
||||
constructor(graph) {
|
||||
this.graph = graph; // The graph data
|
||||
this.currentNodeId = this.findStartNodeId(); // Initialize at the 'start' node
|
||||
this.apiClient = new APIClient();
|
||||
this.visitedNodes = new Set(); // Keep track of visited nodes
|
||||
}
|
||||
|
||||
// Helper method to find the start node ID
|
||||
findStartNodeId() {
|
||||
for (let nodeId in this.graph) {
|
||||
if (this.graph[nodeId].class === 'start') {
|
||||
return nodeId;
|
||||
}
|
||||
}
|
||||
return null; // Return null if no start node is found
|
||||
}
|
||||
|
||||
// Method to execute the current node's API request if it's an 'api' node
|
||||
executeCurrentNode() {
|
||||
console.log(this.currentNodeId)
|
||||
if(!this.currentNodeId) {
|
||||
console.log('No current node to execute.');
|
||||
return;
|
||||
}
|
||||
|
||||
const currentNode = this.graph[this.currentNodeId];
|
||||
if (currentNode && currentNode.class === 'api') {
|
||||
// get API model with currentNode.id
|
||||
//this.apiClient.sendAPIRequest(currentNode);
|
||||
console.log(`Executing API request for node: ${currentNode.id} - ${currentNode.name}`);
|
||||
} else {
|
||||
console.log('Current node is not an API node or does not exist.');
|
||||
}
|
||||
this.visitedNodes.add(this.currentNodeId); // Mark this node as visited
|
||||
|
||||
}
|
||||
|
||||
// Method to move to the next node
|
||||
moveToNextNode() {
|
||||
const currentNode = this.graph[this.currentNodeId];
|
||||
console.log(currentNode);
|
||||
|
||||
if (currentNode && currentNode.connections.length > 0) {
|
||||
// Find the next unvisited node
|
||||
const nextNode = currentNode.connections.find(nodeId => !this.visitedNodes.has(nodeId));
|
||||
if (nextNode) {
|
||||
this.currentNodeId = nextNode;
|
||||
console.log(`Moved to node: ${this.currentNodeId}`);
|
||||
} else {
|
||||
console.log('No more unvisited connections to move to.');
|
||||
this.currentNodeId = null; // No more nodes to visit
|
||||
}
|
||||
} else {
|
||||
console.log('Current node has no connections or does not exist.');
|
||||
this.currentNodeId = null; // No more nodes to visit
|
||||
}
|
||||
}
|
||||
|
||||
// Method to execute the entire scenario from start to end
|
||||
executeAll() {
|
||||
while (this.currentNodeId) {
|
||||
console.log(this.currentNodeId)
|
||||
this.executeCurrentNode();
|
||||
this.moveToNextNode();
|
||||
}
|
||||
console.log('Completed execution of all API nodes.');
|
||||
}
|
||||
|
||||
static extractGraphFromStart(homeData) {
|
||||
console.log(homeData)
|
||||
let graph = {};
|
||||
|
||||
// Helper function to recursively build the graph
|
||||
function buildGraph(nodeId) {
|
||||
const node = homeData[nodeId];
|
||||
if (!node || graph[nodeId]) {
|
||||
// If the node doesn't exist or has already been visited, stop the recursion
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize the node in the graph
|
||||
graph[nodeId] = {
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
class: node.class,
|
||||
connections: []
|
||||
};
|
||||
|
||||
// If the node has outputs, recursively add connected nodes
|
||||
if (node.outputs) {
|
||||
Object.values(node.outputs).forEach(output => {
|
||||
output.connections.forEach(connection => {
|
||||
graph[nodeId].connections.push(connection.node);
|
||||
buildGraph(connection.node); // Recurse
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Find the start node
|
||||
for (let nodeId in homeData) {
|
||||
if (homeData[nodeId].class === 'start') {
|
||||
buildGraph(nodeId); // Start building the graph from the 'start' node
|
||||
break; // Assuming there's only one start node
|
||||
}
|
||||
}
|
||||
|
||||
return graph;
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,6 @@ require.config({paths: {'vs': '/plugins/vs'}});
|
||||
|
||||
class APITester {
|
||||
|
||||
|
||||
constructor() {
|
||||
this.servers = [];
|
||||
this.apiTabTitleTarget = '#apiRequestTabTitle';
|
||||
@@ -16,9 +15,9 @@ class APITester {
|
||||
this.responseEditors = []; //API response body editor
|
||||
this.preRequestEditors = [];
|
||||
this.postRequestEditors = [];
|
||||
window.globals = {};
|
||||
this.globalVariables = window.globals;
|
||||
|
||||
this.variables = {};
|
||||
this.apiClient = new APIClient();
|
||||
}
|
||||
|
||||
renderServers(selectedServer) {
|
||||
@@ -304,7 +303,7 @@ class APITester {
|
||||
|
||||
collectionTemplate(collection, index) {
|
||||
return `
|
||||
<li id="collection_${index}" class="collection" data-index="${index}">
|
||||
<li id="collection_${index}" class="collection api_scenario_item" data-index="${index}">
|
||||
<div class="d-flex justify-content-between">
|
||||
<button class="btn d-inline-flex align-items-center rounded normal"
|
||||
data-bs-toggle="collapse"
|
||||
@@ -326,8 +325,8 @@ class APITester {
|
||||
|
||||
collectionApiTemplate(api, apiIndex, collectionId) {
|
||||
return `
|
||||
<li class="d-flex justify-content-between " data-collection="${collectionId}" data-id="${api.id}" data-index="${apiIndex}">
|
||||
<a href="#" class="d-inline-flex align-items-center rounded open_api_request">${api.name}</a>
|
||||
<li class="d-flex justify-content-between api_request_sortable " draggable="true" data-collection="${collectionId}" data-id="${api.id}" data-index="${apiIndex}" data-node-type="api" data-name="${api.name}">
|
||||
<a href="#" class="d-inline-flex align-items-center rounded open_api_request" data-node-type="api">${api.name}</a>
|
||||
<div class="d-flex justify-content-between">
|
||||
<button class="p-1 reset-button edit_api_request"><i class="fa fa-sharp fa-file-edit"></i></button>
|
||||
<button class="p-1 reset-button delete_api_request"><i class="fa fa-trash-can"></i></button>
|
||||
@@ -339,7 +338,7 @@ class APITester {
|
||||
init(servers) {
|
||||
if (servers) {
|
||||
this.servers = servers;
|
||||
if (this.servers.length === 0){
|
||||
if (this.servers.length === 0) {
|
||||
$('.toast-body').text('서버관리에서 서버를 등록해주세요.');
|
||||
$('.toast').toast('show');
|
||||
}
|
||||
@@ -357,7 +356,7 @@ class APITester {
|
||||
{selector: '.btn_add_variables', action: this.addVariable.bind(this)},
|
||||
{selector: '.btn_remove_variable', action: this.removeVariable.bind(this)},
|
||||
|
||||
{selector: '.send', action: this.sendApiRequest.bind(this)},
|
||||
{selector: '.send', action: this.handleSendAPIRequest.bind(this)},
|
||||
{selector: '.save', action: this.saveAPIRequest.bind(this)},
|
||||
{selector: '.save_collection', action: this.addCollection.bind(this)},
|
||||
{selector: '#cancel-ajax', action: this.cancelAjaxRequest.bind(this)},
|
||||
@@ -379,16 +378,57 @@ class APITester {
|
||||
$(document).on('click', event.selector, event.action);
|
||||
}
|
||||
|
||||
$(document).on('input', '.query_params input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('input', '.query_params input', this.buildPath.bind(this));
|
||||
$(document).on('input', '.query_params input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('input', '.query_params input', this.buildPath.bind(this));
|
||||
$(document).on('change', '.query_params input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.query_params input', this.buildPath.bind(this));
|
||||
$(document).on('input', '.path', this.parseParam.bind(this));
|
||||
$(document).on('input', '.path', this.parseParam.bind(this));
|
||||
$(document).on('change', '.request_headers input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.variables input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.api_request_info select, .api_request_info input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.api_request_info select', this.handleUpdateServer.bind(this));
|
||||
|
||||
window.addEventListener('resize', this.resizeEditor.bind(this));
|
||||
|
||||
|
||||
}
|
||||
|
||||
resizeEditor() {
|
||||
//FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출
|
||||
|
||||
for (let i = 0; i < this.requestEditors.length; i++) {
|
||||
this.requestEditors[i].layout({
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < this.responseEditors.length; i++) {
|
||||
this.responseEditors[i].layout({
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < this.preRequestEditors.length; i++) {
|
||||
this.preRequestEditors[i].layout({
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < this.postRequestEditors.length; i++) {
|
||||
this.postRequestEditors[i].layout({
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.requestEditors.length; i++) {
|
||||
this.requestEditors[i].layout({});
|
||||
}
|
||||
for (let i = 0; i < this.responseEditors.length; i++) {
|
||||
this.responseEditors[i].layout({});
|
||||
}
|
||||
for (let i = 0; i < this.preRequestEditors.length; i++) {
|
||||
this.preRequestEditors[i].layout({});
|
||||
}
|
||||
for (let i = 0; i < this.postRequestEditors.length; i++) {
|
||||
this.postRequestEditors[i].layout({});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -547,7 +587,7 @@ class APITester {
|
||||
this.openTab(model.id);
|
||||
let target = $('#api_request_' + model.id);
|
||||
|
||||
require(['vs/editor/editor.main'], () => {
|
||||
require(['vs/editor/editor.main'], () => {
|
||||
let requestBodyEditor = monaco.editor.create(target.find(".request_body")[0], {
|
||||
value: model.requestBody,
|
||||
language: 'json',
|
||||
@@ -555,15 +595,15 @@ class APITester {
|
||||
automaticLayout: true
|
||||
});
|
||||
me.requestEditors.push(requestBodyEditor);
|
||||
target.find(".request_body")[0].addEventListener('shown.bs.tab', () => {
|
||||
target.find(".request_body")[0].addEventListener('shown.bs.tab', () => {
|
||||
me.requestEditors[index].layout();
|
||||
});
|
||||
|
||||
me.requestEditors[index].onDidChangeModelContent( (e) => {
|
||||
me.requestEditors[index].onDidChangeModelContent((e) => {
|
||||
model.requestBody = requestBodyEditor.getValue();
|
||||
});
|
||||
|
||||
target.find('.request_body_type').on('change', () => {
|
||||
target.find('.request_body_type').on('change', () => {
|
||||
let model = requestBodyEditor.getModel();
|
||||
monaco.editor.setModelLanguage(model, $(this).val());
|
||||
});
|
||||
@@ -583,11 +623,11 @@ class APITester {
|
||||
automaticLayout: true
|
||||
});
|
||||
me.preRequestEditors.push(preRequestEditor);
|
||||
target.find(".pre-request")[0].addEventListener('shown.bs.tab', () => {
|
||||
target.find(".pre-request")[0].addEventListener('shown.bs.tab', () => {
|
||||
me.preRequestEditors[index].layout();
|
||||
});
|
||||
|
||||
me.preRequestEditors[index].onDidChangeModelContent( (e) => {
|
||||
me.preRequestEditors[index].onDidChangeModelContent((e) => {
|
||||
model.preRequestScript = preRequestEditor.getValue();
|
||||
});
|
||||
|
||||
@@ -598,37 +638,32 @@ class APITester {
|
||||
automaticLayout: true
|
||||
});
|
||||
me.postRequestEditors.push(postRequestEditor);
|
||||
target.find(".post-request")[0].addEventListener('shown.bs.tab', () => {
|
||||
target.find(".post-request")[0].addEventListener('shown.bs.tab', () => {
|
||||
me.postRequestEditors[index].layout();
|
||||
});
|
||||
|
||||
me.postRequestEditors[index].onDidChangeModelContent( (e) => {
|
||||
me.postRequestEditors[index].onDidChangeModelContent((e) => {
|
||||
model.postRequestScript = postRequestEditor.getValue();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
renderResponse(tabIndex) {
|
||||
//console.log('renderResponse: ' + tabIndex);
|
||||
console.log('renderResponse: ' + tabIndex);
|
||||
let model = this.apiRequests[tabIndex];
|
||||
let target = $('#api_request_' + model.id);
|
||||
target.find('.response_headers').empty();
|
||||
target.find(".response_status").empty();
|
||||
|
||||
//console.log(model.responseModel);
|
||||
|
||||
try {
|
||||
const parsedJson = JSON.parse(model.responseModel.body);
|
||||
const formattedJson = JSON.stringify(parsedJson, null, 2);
|
||||
this.responseEditors[tabIndex].setValue(formattedJson);
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
this.responseEditors[tabIndex].setValue(model.responseModel.body);
|
||||
}
|
||||
if(model.responseModel && model.responseModel.headers) {
|
||||
if (model.responseModel && model.responseModel.headers) {
|
||||
for (let i = 0; i < model.responseModel.headers.length; i++) {
|
||||
target.find('.response_headers').append(this.responseHeaderTemplate(model.responseModel.headers[i], i));
|
||||
}
|
||||
@@ -640,6 +675,14 @@ class APITester {
|
||||
|
||||
}
|
||||
|
||||
customHelper(event) {
|
||||
// Create and return the custom helper element
|
||||
let name = $(event.target).closest('.api_request_sortable').find('.open_api_request').text().trim();
|
||||
let apiId = $(event.target).closest('.api_request_sortable').data('id');
|
||||
return `<div style="display: flex; flex-direction: column; flex: 1; border: 2px dashed #333; padding: 10px;" data-id="${apiId}">
|
||||
<div>${name}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
renderCollections() {
|
||||
let select = $('#modal_collection');
|
||||
@@ -654,6 +697,25 @@ class APITester {
|
||||
option.text(this.collections[i].name);
|
||||
select.append(option);
|
||||
}
|
||||
|
||||
$("li .api_request_sortable").draggable({
|
||||
helper: this.customHelper,
|
||||
start: function (event, ui) {
|
||||
// You can add any additional data or styles you want when dragging starts
|
||||
$(this).addClass('dragging');
|
||||
const apiDetails = {
|
||||
name: 'API 이름',
|
||||
method: 'POST',
|
||||
url: 'http://localhost:8080/api/test'
|
||||
};
|
||||
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
// Clean up, e.g., remove styles or data
|
||||
$(this).removeClass('dragging');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
renderCollection(collection, index) {
|
||||
@@ -661,7 +723,6 @@ class APITester {
|
||||
}
|
||||
|
||||
openTab(id) {
|
||||
//console.log('openTab: ' + id);
|
||||
try {
|
||||
$(`#api_request_tab_${id}`).tab('show'); // API request 탭 활성화
|
||||
} catch (e) {
|
||||
@@ -763,6 +824,7 @@ class APITester {
|
||||
target.find('.variables').empty();
|
||||
target.find('.variables').append(this.renderVariables(model.variables));
|
||||
}
|
||||
|
||||
parseParam(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
@@ -785,6 +847,7 @@ class APITester {
|
||||
this.renderQueryParamsView(tabIndex);
|
||||
}
|
||||
}
|
||||
|
||||
buildPath(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
@@ -813,14 +876,13 @@ class APITester {
|
||||
$("#loading-overlay").hide();
|
||||
}
|
||||
|
||||
sendApiRequest(event) {
|
||||
handleSendAPIRequest(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
console.log(tabIndex);
|
||||
const me = this;
|
||||
|
||||
let model = this.apiRequests[tabIndex];
|
||||
|
||||
if (!model.server){
|
||||
if (!model.server) {
|
||||
$('.toast-body').text('서버를 등록해주세요.');
|
||||
$('.toast').toast('show');
|
||||
return;
|
||||
@@ -829,53 +891,42 @@ class APITester {
|
||||
let target = $('#api_request_' + model.id);
|
||||
target.find('.response_headers').empty();
|
||||
this.responseEditors[tabIndex].setValue('');
|
||||
let startTime = new Date().getTime();
|
||||
|
||||
this.showLoadingOverlay();
|
||||
model.responseModel = {};
|
||||
this.showLoadingOverlay();
|
||||
|
||||
let processedRequest = this.executePreRequestScript(model, tabIndex,() => {
|
||||
processedRequest = this.replacePlaceholdersWithVariables(processedRequest, tabIndex);
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: '/mgmt/api/test.do',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(processedRequest),
|
||||
success: (data) => {
|
||||
model.responseModel.status = data.status;
|
||||
model.responseModel.body = data.body;
|
||||
model.responseModel.headers = data.headers;
|
||||
model.responseModel.size = data.size;
|
||||
let startTime = new Date().getTime();
|
||||
this.currentAjaxRequest = this.apiClient.sendAPIRequest(model)
|
||||
.then(response => {
|
||||
if (response) {
|
||||
model.responseModel = response;
|
||||
let endTime = new Date().getTime();
|
||||
model.responseModel.time = endTime - startTime;
|
||||
} else {
|
||||
model.responseModel = {
|
||||
status: 0,
|
||||
time: 0,
|
||||
size: 0,
|
||||
headers: [],
|
||||
body: ''
|
||||
};
|
||||
}
|
||||
|
||||
let response = {};
|
||||
response.body = data.body;
|
||||
response.status = data.status;
|
||||
response.headers = {};
|
||||
response.size = data.size;
|
||||
_.forEach(data.headers, (header) => {
|
||||
response.headers[header.key] = header.value;
|
||||
});
|
||||
|
||||
|
||||
this.executePostRequestScript(model.postRequestScript, tabIndex, response, ()=> {
|
||||
let endTime = new Date().getTime();
|
||||
model.responseModel.time = endTime - startTime;
|
||||
me.renderResponse(tabIndex);
|
||||
me.hideLoadingOverlay();
|
||||
});
|
||||
},
|
||||
error: (response, textStatus, errorThrown) => {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
this.renderResponse(tabIndex);
|
||||
this.hideLoadingOverlay();
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error.name)
|
||||
if (error.name === 'AbortError') {
|
||||
console.log('Fetch aborted');
|
||||
} else {
|
||||
console.log('error3')
|
||||
$('.toast-body').text(error);
|
||||
$('.toast').toast('show');
|
||||
}
|
||||
this.hideLoadingOverlay();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
loadCollections() {
|
||||
const me = this;
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
@@ -911,9 +962,6 @@ class APITester {
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({name: name}),
|
||||
success: function (data) {
|
||||
|
||||
},
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
@@ -1046,8 +1094,8 @@ class APITester {
|
||||
queryParams: [],
|
||||
variables: [],
|
||||
requestBody: '',
|
||||
preRequestScript :'',
|
||||
postRequestScript :'',
|
||||
preRequestScript: '',
|
||||
postRequestScript: '',
|
||||
collectionId: collectionId,
|
||||
responseModel: {
|
||||
status: 0,
|
||||
@@ -1088,9 +1136,14 @@ class APITester {
|
||||
|
||||
cancelAjaxRequest() {
|
||||
if (this.currentAjaxRequest) {
|
||||
this.currentAjaxRequest.abort();
|
||||
this.hideLoadingOverlay();
|
||||
try {
|
||||
|
||||
this.currentAjaxRequest.abort();
|
||||
} catch (e) {
|
||||
this.apiClient.abort();
|
||||
}
|
||||
}
|
||||
this.hideLoadingOverlay();
|
||||
}
|
||||
|
||||
openApiRequest(event) {
|
||||
@@ -1147,7 +1200,7 @@ class APITester {
|
||||
return api.id === apiId;
|
||||
});
|
||||
console.log(apiIndex);
|
||||
if(apiIndex >= 0){
|
||||
if (apiIndex >= 0) {
|
||||
this.closeTabWithApiIndex(apiIndex);
|
||||
}
|
||||
const me = this;
|
||||
@@ -1172,7 +1225,7 @@ class APITester {
|
||||
|
||||
closeTabWithApiIndex(index) {
|
||||
console.log(index);
|
||||
if (index !== undefined){
|
||||
if (index !== undefined) {
|
||||
//console.log('closeTabWithApiIndex: ' + index);
|
||||
const model = this.apiRequests[index];
|
||||
console.log(model);
|
||||
@@ -1186,103 +1239,11 @@ class APITester {
|
||||
$(`#apiRequestTabTitle li:eq(0) button`).tab('show');
|
||||
}
|
||||
}
|
||||
|
||||
closeTab(event) {
|
||||
const index = $('#apiRequestTabTitle').children().index($(event.currentTarget).closest('.nav-item'));
|
||||
this.closeTabWithApiIndex(index);
|
||||
}
|
||||
|
||||
replacePlaceholdersWithVariables(original, index) {
|
||||
let request = JSON.parse(JSON.stringify(original));
|
||||
|
||||
let mergedVariables = {};
|
||||
_.forEach(this.globalVariables, (value, key) => {
|
||||
mergedVariables[key] = value;
|
||||
});
|
||||
|
||||
if (this.variables[index]) {
|
||||
_.forEach(this.variables[index], (value, key) => {
|
||||
mergedVariables[key] = value;
|
||||
});
|
||||
}
|
||||
|
||||
_.forEach(mergedVariables, (value, key) => {
|
||||
const placeholder = `{{${key}}}`;
|
||||
// Replace in path
|
||||
request.path = request.path.replace(new RegExp(placeholder, 'g'), value);
|
||||
|
||||
// Replace in requestBody
|
||||
if (request.requestBody) {
|
||||
request.requestBody = request.requestBody.replace(new RegExp(placeholder, 'g'), value);
|
||||
}
|
||||
|
||||
// Replace in headers
|
||||
if (request.headers) {
|
||||
request.headers = request.headers.map(header => {
|
||||
return {
|
||||
...header,
|
||||
key: header.key.replace(new RegExp(placeholder, 'g'), value),
|
||||
value: header.value.replace(new RegExp(placeholder, 'g'), value)
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Replace in queryParams
|
||||
if (request.queryParams) {
|
||||
request.queryParams = request.queryParams.map(queryParam => {
|
||||
return {
|
||||
...queryParam,
|
||||
key: queryParam.key.replace(new RegExp(placeholder, 'g'), value),
|
||||
value: queryParam.value.replace(new RegExp(placeholder, 'g'), value)
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return request;
|
||||
}
|
||||
|
||||
executePreRequestScript(model, index, callback) {
|
||||
let script = model.preRequestScript;
|
||||
let resultFrame = document.getElementById('preRequest');
|
||||
let {headers, method, path, queryParams, requestBody} = model;
|
||||
window.request = {headers, method, path, queryParams, requestBody};
|
||||
this.variables[index] = {};
|
||||
model.variables.forEach((item) =>{
|
||||
if (item.enabled) {
|
||||
this.variables[index][item.key] = item.value;
|
||||
}
|
||||
});
|
||||
|
||||
window.preRequestComplete = function(updatedModel) {
|
||||
callback(updatedModel);
|
||||
};
|
||||
window.temp_variable = this.variables[index];
|
||||
|
||||
resultFrame.srcdoc = `<script>
|
||||
window.globals = window.parent.globals;
|
||||
window.variables = window.parent.temp_variable;
|
||||
window.request = window.parent.request;
|
||||
${script}
|
||||
window.parent.preRequestComplete(window.request);
|
||||
</script>`;
|
||||
|
||||
return model;
|
||||
}
|
||||
|
||||
executePostRequestScript(script, index, response, callback) {
|
||||
let resultFrame = document.getElementById('postRequest');
|
||||
window.response = response;
|
||||
window.parent.temp_variable = this.variables[index];
|
||||
window.postRequestComplete = function(updatedModel) {
|
||||
callback(updatedModel);
|
||||
};
|
||||
window.temp_variable = this.variables[index];
|
||||
resultFrame.srcdoc = `<script>
|
||||
window.globals = window.parent.globals;
|
||||
window.variables = window.parent.temp_variable;
|
||||
window.response = window.parent.response;
|
||||
${script}
|
||||
window.parent.postRequestComplete(window.request);
|
||||
</script>`;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
import {css} from "lit-element"; export const style = css`.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}`;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
@@ -0,0 +1,503 @@
|
||||
<!doctype html>
|
||||
<html lang="us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Example Page</title>
|
||||
<link href="jquery-ui.css" rel="stylesheet">
|
||||
<style>
|
||||
body{
|
||||
font-family: "Trebuchet MS", sans-serif;
|
||||
margin: 50px;
|
||||
}
|
||||
.demoHeaders {
|
||||
margin-top: 2em;
|
||||
}
|
||||
#dialog-link {
|
||||
padding: .4em 1em .4em 20px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
#dialog-link span.ui-icon {
|
||||
margin: 0 5px 0 0;
|
||||
position: absolute;
|
||||
left: .2em;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
#icons {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#icons li {
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
#icons span.ui-icon {
|
||||
float: left;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.fakewindowcontain .ui-widget-overlay {
|
||||
position: absolute;
|
||||
}
|
||||
select {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Welcome to jQuery UI!</h1>
|
||||
|
||||
<div class="ui-widget">
|
||||
<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p>
|
||||
</div>
|
||||
|
||||
<h1>YOUR COMPONENTS:</h1>
|
||||
|
||||
<!-- Accordion -->
|
||||
<h2 class="demoHeaders">Accordion</h2>
|
||||
<div id="accordion">
|
||||
<h3>First</h3>
|
||||
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
|
||||
<h3>Second</h3>
|
||||
<div>Phasellus mattis tincidunt nibh.</div>
|
||||
<h3>Third</h3>
|
||||
<div>Nam dui erat, auctor a, dignissim quis.</div>
|
||||
</div>
|
||||
|
||||
<!-- Autocomplete -->
|
||||
<h2 class="demoHeaders">Autocomplete</h2>
|
||||
<div>
|
||||
<input id="autocomplete" title="type "a"">
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<h2 class="demoHeaders">Button</h2>
|
||||
<button id="button">A button element</button>
|
||||
<button id="button-icon">An icon-only button</button>
|
||||
|
||||
<!-- Checkboxradio -->
|
||||
<h2 class="demoHeaders">Checkboxradio</h2>
|
||||
<form style="margin-top: 1em;">
|
||||
<div id="radioset">
|
||||
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
|
||||
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
|
||||
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Controlgroup -->
|
||||
<h2 class="demoHeaders">Controlgroup</h2>
|
||||
<fieldset>
|
||||
<legend>Rental Car</legend>
|
||||
<div id="controlgroup">
|
||||
<select id="car-type">
|
||||
<option>Compact car</option>
|
||||
<option>Midsize car</option>
|
||||
<option>Full size car</option>
|
||||
<option>SUV</option>
|
||||
<option>Luxury</option>
|
||||
<option>Truck</option>
|
||||
<option>Van</option>
|
||||
</select>
|
||||
<label for="transmission-standard">Standard</label>
|
||||
<input type="radio" name="transmission" id="transmission-standard">
|
||||
<label for="transmission-automatic">Automatic</label>
|
||||
<input type="radio" name="transmission" id="transmission-automatic">
|
||||
<label for="insurance">Insurance</label>
|
||||
<input type="checkbox" name="insurance" id="insurance">
|
||||
<label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label>
|
||||
<input id="horizontal-spinner" class="ui-spinner-input">
|
||||
<button>Book Now!</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Tabs -->
|
||||
<h2 class="demoHeaders">Tabs</h2>
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
<li><a href="#tabs-1">First</a></li>
|
||||
<li><a href="#tabs-2">Second</a></li>
|
||||
<li><a href="#tabs-3">Third</a></li>
|
||||
</ul>
|
||||
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
||||
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
|
||||
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
|
||||
</div>
|
||||
|
||||
<h2 class="demoHeaders">Dialog</h2>
|
||||
<p>
|
||||
<button id="dialog-link" class="ui-button ui-corner-all ui-widget">
|
||||
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<h2 class="demoHeaders">Overlay and Shadow Classes</h2>
|
||||
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
|
||||
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
|
||||
|
||||
<!-- ui-dialog -->
|
||||
<div class="ui-widget-overlay ui-front"></div>
|
||||
<div style="position: absolute; width: 320px; left: 50px; top: 30px; padding: 1.2em" class="ui-widget ui-front ui-widget-content ui-corner-all ui-widget-shadow">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ui-dialog -->
|
||||
<div id="dialog" title="Dialog Title">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
|
||||
<ul id="icons" class="ui-widget ui-helper-clearfix">
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-n"><span class="ui-icon ui-icon-caret-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-ne"><span class="ui-icon ui-icon-caret-1-ne"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-e"><span class="ui-icon ui-icon-caret-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-se"><span class="ui-icon ui-icon-caret-1-se"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-s"><span class="ui-icon ui-icon-caret-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-sw"><span class="ui-icon ui-icon-caret-1-sw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-w"><span class="ui-icon ui-icon-caret-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-nw"><span class="ui-icon ui-icon-caret-1-nw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-n-s"><span class="ui-icon ui-icon-caret-2-n-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-e-w"><span class="ui-icon ui-icon-caret-2-e-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
|
||||
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
|
||||
</ul>
|
||||
|
||||
<!-- Slider -->
|
||||
<h2 class="demoHeaders">Slider</h2>
|
||||
<div id="slider"></div>
|
||||
|
||||
<!-- Datepicker -->
|
||||
<h2 class="demoHeaders">Datepicker</h2>
|
||||
<div id="datepicker"></div>
|
||||
|
||||
<!-- Progressbar -->
|
||||
<h2 class="demoHeaders">Progressbar</h2>
|
||||
<div id="progressbar"></div>
|
||||
|
||||
<!-- Progressbar -->
|
||||
<h2 class="demoHeaders">Selectmenu</h2>
|
||||
<select id="selectmenu">
|
||||
<option>Slower</option>
|
||||
<option>Slow</option>
|
||||
<option selected="selected">Medium</option>
|
||||
<option>Fast</option>
|
||||
<option>Faster</option>
|
||||
</select>
|
||||
|
||||
<!-- Spinner -->
|
||||
<h2 class="demoHeaders">Spinner</h2>
|
||||
<input id="spinner">
|
||||
|
||||
<!-- Menu -->
|
||||
<h2 class="demoHeaders">Menu</h2>
|
||||
<ul style="width:100px;" id="menu">
|
||||
<li><div>Item 1</div></li>
|
||||
<li><div>Item 2</div></li>
|
||||
<li><div>Item 3</div>
|
||||
<ul>
|
||||
<li><div>Item 3-1</div></li>
|
||||
<li><div>Item 3-2</div></li>
|
||||
<li><div>Item 3-3</div></li>
|
||||
<li><div>Item 3-4</div></li>
|
||||
<li><div>Item 3-5</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div>Item 4</div></li>
|
||||
<li><div>Item 5</div></li>
|
||||
</ul>
|
||||
|
||||
<!-- Tooltip -->
|
||||
<h2 class="demoHeaders">Tooltip</h2>
|
||||
<p id="tooltip">
|
||||
<a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
||||
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
|
||||
</p>
|
||||
|
||||
<!-- Highlight / Error -->
|
||||
<h2 class="demoHeaders">Highlight / Error</h2>
|
||||
<div class="ui-widget">
|
||||
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
|
||||
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
|
||||
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="ui-widget">
|
||||
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
|
||||
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
|
||||
<strong>Alert:</strong> Sample ui-state-error style.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="external/jquery/jquery.js"></script>
|
||||
<script src="jquery-ui.js"></script>
|
||||
<script>
|
||||
$( "#accordion" ).accordion();
|
||||
|
||||
var availableTags = [
|
||||
"ActionScript",
|
||||
"AppleScript",
|
||||
"Asp",
|
||||
"BASIC",
|
||||
"C",
|
||||
"C++",
|
||||
"Clojure",
|
||||
"COBOL",
|
||||
"ColdFusion",
|
||||
"Erlang",
|
||||
"Fortran",
|
||||
"Groovy",
|
||||
"Haskell",
|
||||
"Java",
|
||||
"JavaScript",
|
||||
"Lisp",
|
||||
"Perl",
|
||||
"PHP",
|
||||
"Python",
|
||||
"Ruby",
|
||||
"Scala",
|
||||
"Scheme"
|
||||
];
|
||||
$( "#autocomplete" ).autocomplete({
|
||||
source: availableTags
|
||||
});
|
||||
|
||||
$( "#button" ).button();
|
||||
$( "#button-icon" ).button({
|
||||
icon: "ui-icon-gear",
|
||||
showLabel: false
|
||||
});
|
||||
|
||||
$( "#radioset" ).buttonset();
|
||||
|
||||
$( "#controlgroup" ).controlgroup();
|
||||
|
||||
$( "#tabs" ).tabs();
|
||||
|
||||
$( "#dialog" ).dialog({
|
||||
autoOpen: false,
|
||||
width: 400,
|
||||
buttons: [
|
||||
{
|
||||
text: "Ok",
|
||||
click: function() {
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "Cancel",
|
||||
click: function() {
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Link to open the dialog
|
||||
$( "#dialog-link" ).click(function( event ) {
|
||||
$( "#dialog" ).dialog( "open" );
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$( "#datepicker" ).datepicker({
|
||||
inline: true
|
||||
});
|
||||
|
||||
$( "#slider" ).slider({
|
||||
range: true,
|
||||
values: [ 17, 67 ]
|
||||
});
|
||||
|
||||
$( "#progressbar" ).progressbar({
|
||||
value: 20
|
||||
});
|
||||
|
||||
$( "#spinner" ).spinner();
|
||||
|
||||
$( "#menu" ).menu();
|
||||
|
||||
$( "#tooltip" ).tooltip();
|
||||
|
||||
$( "#selectmenu" ).selectmenu();
|
||||
|
||||
// Hover states on the static widgets
|
||||
$( "#dialog-link, #icons li" ).hover(
|
||||
function() {
|
||||
$( this ).addClass( "ui-state-hover" );
|
||||
},
|
||||
function() {
|
||||
$( this ).removeClass( "ui-state-hover" );
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
+19062
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,886 @@
|
||||
/*!
|
||||
* jQuery UI CSS Framework 1.13.2
|
||||
* http://jqueryui.com
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://api.jqueryui.com/category/theming/
|
||||
*/
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.ui-helper-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
.ui-helper-clearfix:before,
|
||||
.ui-helper-clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.ui-helper-clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.ui-helper-zfix {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled {
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
.ui-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -.25em;
|
||||
position: relative;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui-widget-icon-block {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-accordion .ui-accordion-header {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 2px 0 0 0;
|
||||
padding: .5em .5em .5em .7em;
|
||||
font-size: 100%;
|
||||
}
|
||||
.ui-accordion .ui-accordion-content {
|
||||
padding: 1em 2.2em;
|
||||
border-top: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.ui-autocomplete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
outline: 0;
|
||||
}
|
||||
.ui-menu .ui-menu {
|
||||
position: absolute;
|
||||
}
|
||||
.ui-menu .ui-menu-item {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
/* support: IE10, see #8844 */
|
||||
list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
|
||||
}
|
||||
.ui-menu .ui-menu-item-wrapper {
|
||||
position: relative;
|
||||
padding: 3px 1em 3px .4em;
|
||||
}
|
||||
.ui-menu .ui-menu-divider {
|
||||
margin: 5px 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
.ui-menu .ui-state-focus,
|
||||
.ui-menu .ui-state-active {
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
/* icon support */
|
||||
.ui-menu-icons {
|
||||
position: relative;
|
||||
}
|
||||
.ui-menu-icons .ui-menu-item-wrapper {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
/* left-aligned */
|
||||
.ui-menu .ui-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: .2em;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
/* right-aligned */
|
||||
.ui-menu .ui-menu-icon {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.ui-button {
|
||||
padding: .4em 1em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
margin-right: .1em;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
/* Support: IE <= 11 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.ui-button,
|
||||
.ui-button:link,
|
||||
.ui-button:visited,
|
||||
.ui-button:hover,
|
||||
.ui-button:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* to make room for the icon, a width needs to be set here */
|
||||
.ui-button-icon-only {
|
||||
width: 2em;
|
||||
box-sizing: border-box;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* no icon support for input elements */
|
||||
input.ui-button.ui-button-icon-only {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
/* button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -8px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.ui-button.ui-icon-notext .ui-icon {
|
||||
padding: 0;
|
||||
width: 2.1em;
|
||||
height: 2.1em;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
input.ui-button.ui-icon-notext .ui-icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-indent: 0;
|
||||
white-space: normal;
|
||||
padding: .4em 1em;
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
/* Support: Firefox 5 - 40 */
|
||||
input.ui-button::-moz-focus-inner,
|
||||
button.ui-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ui-controlgroup {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
.ui-controlgroup > .ui-controlgroup-item {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui-controlgroup > .ui-controlgroup-item:focus,
|
||||
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
|
||||
z-index: 9999;
|
||||
}
|
||||
.ui-controlgroup-vertical > .ui-controlgroup-item {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-controlgroup-vertical .ui-controlgroup-item {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ui-controlgroup .ui-controlgroup-label {
|
||||
padding: .4em 1em;
|
||||
}
|
||||
.ui-controlgroup .ui-controlgroup-label span {
|
||||
font-size: 80%;
|
||||
}
|
||||
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
|
||||
border-left: none;
|
||||
}
|
||||
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
|
||||
border-right: none;
|
||||
}
|
||||
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Spinner specific style fixes */
|
||||
.ui-controlgroup-vertical .ui-spinner-input {
|
||||
|
||||
/* Support: IE8 only, Android < 4.4 only */
|
||||
width: 75%;
|
||||
width: calc( 100% - 2.4em );
|
||||
}
|
||||
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
.ui-checkboxradio-label .ui-icon-background {
|
||||
box-shadow: inset 1px 1px 1px #ccc;
|
||||
border-radius: .12em;
|
||||
border: none;
|
||||
}
|
||||
.ui-checkboxradio-radio-label .ui-icon-background {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 1em;
|
||||
overflow: visible;
|
||||
border: none;
|
||||
}
|
||||
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
|
||||
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
|
||||
background-image: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
}
|
||||
.ui-checkboxradio-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ui-datepicker {
|
||||
width: 17em;
|
||||
padding: .2em .2em 0;
|
||||
display: none;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-header {
|
||||
position: relative;
|
||||
padding: .2em 0;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev,
|
||||
.ui-datepicker .ui-datepicker-next {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev-hover,
|
||||
.ui-datepicker .ui-datepicker-next-hover {
|
||||
top: 1px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev {
|
||||
left: 2px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-next {
|
||||
right: 2px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev-hover {
|
||||
left: 1px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-next-hover {
|
||||
right: 1px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev span,
|
||||
.ui-datepicker .ui-datepicker-next span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-title {
|
||||
margin: 0 2.3em;
|
||||
line-height: 1.8em;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-title select {
|
||||
font-size: 1em;
|
||||
margin: 1px 0;
|
||||
}
|
||||
.ui-datepicker select.ui-datepicker-month,
|
||||
.ui-datepicker select.ui-datepicker-year {
|
||||
width: 45%;
|
||||
}
|
||||
.ui-datepicker table {
|
||||
width: 100%;
|
||||
font-size: .9em;
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 .4em;
|
||||
}
|
||||
.ui-datepicker th {
|
||||
padding: .7em .3em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
.ui-datepicker td {
|
||||
border: 0;
|
||||
padding: 1px;
|
||||
}
|
||||
.ui-datepicker td span,
|
||||
.ui-datepicker td a {
|
||||
display: block;
|
||||
padding: .2em;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-buttonpane {
|
||||
background-image: none;
|
||||
margin: .7em 0 0 0;
|
||||
padding: 0 .2em;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-buttonpane button {
|
||||
float: right;
|
||||
margin: .5em .2em .4em;
|
||||
cursor: pointer;
|
||||
padding: .2em .6em .3em .6em;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* with multiple calendars */
|
||||
.ui-datepicker.ui-datepicker-multi {
|
||||
width: auto;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-group {
|
||||
float: left;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-group table {
|
||||
width: 95%;
|
||||
margin: 0 auto .4em;
|
||||
}
|
||||
.ui-datepicker-multi-2 .ui-datepicker-group {
|
||||
width: 50%;
|
||||
}
|
||||
.ui-datepicker-multi-3 .ui-datepicker-group {
|
||||
width: 33.3%;
|
||||
}
|
||||
.ui-datepicker-multi-4 .ui-datepicker-group {
|
||||
width: 25%;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
|
||||
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
|
||||
border-left-width: 0;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-buttonpane {
|
||||
clear: left;
|
||||
}
|
||||
.ui-datepicker-row-break {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* RTL support */
|
||||
.ui-datepicker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-prev {
|
||||
right: 2px;
|
||||
left: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-next {
|
||||
left: 2px;
|
||||
right: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-prev:hover {
|
||||
right: 1px;
|
||||
left: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-next:hover {
|
||||
left: 1px;
|
||||
right: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane {
|
||||
clear: right;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
|
||||
float: left;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
|
||||
.ui-datepicker-rtl .ui-datepicker-group {
|
||||
float: right;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
|
||||
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.ui-datepicker .ui-icon {
|
||||
display: block;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
left: .5em;
|
||||
top: .3em;
|
||||
}
|
||||
.ui-dialog {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: .2em;
|
||||
outline: 0;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding: .4em 1em;
|
||||
position: relative;
|
||||
}
|
||||
.ui-dialog .ui-dialog-title {
|
||||
float: left;
|
||||
margin: .1em 0;
|
||||
white-space: nowrap;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
right: .3em;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
margin: -10px 0 0 0;
|
||||
padding: 1px;
|
||||
height: 20px;
|
||||
}
|
||||
.ui-dialog .ui-dialog-content {
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: .5em 1em;
|
||||
background: none;
|
||||
overflow: auto;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
text-align: left;
|
||||
border-width: 1px 0 0 0;
|
||||
background-image: none;
|
||||
margin-top: .5em;
|
||||
padding: .3em 1em .5em .4em;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
|
||||
float: right;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane button {
|
||||
margin: .5em .4em .5em 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-dialog .ui-resizable-n {
|
||||
height: 2px;
|
||||
top: 0;
|
||||
}
|
||||
.ui-dialog .ui-resizable-e {
|
||||
width: 2px;
|
||||
right: 0;
|
||||
}
|
||||
.ui-dialog .ui-resizable-s {
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-dialog .ui-resizable-w {
|
||||
width: 2px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-dialog .ui-resizable-se,
|
||||
.ui-dialog .ui-resizable-sw,
|
||||
.ui-dialog .ui-resizable-ne,
|
||||
.ui-dialog .ui-resizable-nw {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
.ui-dialog .ui-resizable-se {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-dialog .ui-resizable-sw {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-dialog .ui-resizable-ne {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ui-dialog .ui-resizable-nw {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ui-draggable .ui-dialog-titlebar {
|
||||
cursor: move;
|
||||
}
|
||||
.ui-draggable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-resizable {
|
||||
position: relative;
|
||||
}
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0.1px;
|
||||
display: block;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-resizable-disabled .ui-resizable-handle,
|
||||
.ui-resizable-autohide .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-s {
|
||||
cursor: s-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 7px;
|
||||
right: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
left: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
}
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.ui-progressbar {
|
||||
height: 2em;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-progressbar .ui-progressbar-value {
|
||||
margin: -1px;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-progressbar .ui-progressbar-overlay {
|
||||
background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
|
||||
height: 100%;
|
||||
-ms-filter: "alpha(opacity=25)"; /* support: IE8 */
|
||||
opacity: 0.25;
|
||||
}
|
||||
.ui-progressbar-indeterminate .ui-progressbar-value {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-selectable {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-selectable-helper {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: 1px dotted black;
|
||||
}
|
||||
.ui-selectmenu-menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
}
|
||||
.ui-selectmenu-menu .ui-menu {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
padding: 2px 0.4em;
|
||||
margin: 0.5em 0 0 0;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
.ui-selectmenu-open {
|
||||
display: block;
|
||||
}
|
||||
.ui-selectmenu-text {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ui-selectmenu-button.ui-button {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
width: 14em;
|
||||
}
|
||||
.ui-selectmenu-icon.ui-icon {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: pointer;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
/* support: IE8 - See #6727 */
|
||||
.ui-slider.ui-state-disabled .ui-slider-handle,
|
||||
.ui-slider.ui-state-disabled .ui-slider-range {
|
||||
filter: inherit;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal {
|
||||
height: .8em;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-handle {
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-min {
|
||||
left: 0;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-max {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui-slider-vertical {
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-handle {
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range-min {
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range-max {
|
||||
top: 0;
|
||||
}
|
||||
.ui-sortable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-spinner {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-spinner-input {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: .222em 0;
|
||||
margin: .2em 0;
|
||||
vertical-align: middle;
|
||||
margin-left: .4em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
.ui-spinner-button {
|
||||
width: 1.6em;
|
||||
height: 50%;
|
||||
font-size: .5em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
}
|
||||
/* more specificity required here to override default borders */
|
||||
.ui-spinner a.ui-spinner-button {
|
||||
border-top-style: none;
|
||||
border-bottom-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
.ui-spinner-up {
|
||||
top: 0;
|
||||
}
|
||||
.ui-spinner-down {
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-tabs {
|
||||
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
|
||||
padding: .2em;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav {
|
||||
margin: 0;
|
||||
padding: .2em .2em 0;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 1px .2em 0 0;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
|
||||
float: left;
|
||||
padding: .5em 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
|
||||
margin-bottom: -1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
|
||||
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
|
||||
cursor: text;
|
||||
}
|
||||
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
display: block;
|
||||
border-width: 0;
|
||||
padding: 1em 1.4em;
|
||||
background: none;
|
||||
}
|
||||
.ui-tooltip {
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-width: 300px;
|
||||
}
|
||||
body .ui-tooltip {
|
||||
border-width: 2px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,446 @@
|
||||
/*!
|
||||
* jQuery UI CSS Framework 1.13.2
|
||||
* http://jqueryui.com
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://api.jqueryui.com/category/theming/
|
||||
*
|
||||
* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
|
||||
*/
|
||||
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget {
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget .ui-widget {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget.ui-widget-content {
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border: 1px solid #dddddd;
|
||||
background: #ffffff;
|
||||
color: #333333;
|
||||
}
|
||||
.ui-widget-content a {
|
||||
color: #333333;
|
||||
}
|
||||
.ui-widget-header {
|
||||
border: 1px solid #dddddd;
|
||||
background: #e9e9e9;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-widget-header a {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
.ui-state-default,
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default,
|
||||
.ui-button,
|
||||
|
||||
/* We use html here because we need a greater specificity to make sure disabled
|
||||
works properly when clicked or hovered */
|
||||
html .ui-button.ui-state-disabled:hover,
|
||||
html .ui-button.ui-state-disabled:active {
|
||||
border: 1px solid #c5c5c5;
|
||||
background: #f6f6f6;
|
||||
font-weight: normal;
|
||||
color: #454545;
|
||||
}
|
||||
.ui-state-default a,
|
||||
.ui-state-default a:link,
|
||||
.ui-state-default a:visited,
|
||||
a.ui-button,
|
||||
a:link.ui-button,
|
||||
a:visited.ui-button,
|
||||
.ui-button {
|
||||
color: #454545;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-state-hover,
|
||||
.ui-widget-content .ui-state-hover,
|
||||
.ui-widget-header .ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-header .ui-state-focus,
|
||||
.ui-button:hover,
|
||||
.ui-button:focus {
|
||||
border: 1px solid #cccccc;
|
||||
background: #ededed;
|
||||
font-weight: normal;
|
||||
color: #2b2b2b;
|
||||
}
|
||||
.ui-state-hover a,
|
||||
.ui-state-hover a:hover,
|
||||
.ui-state-hover a:link,
|
||||
.ui-state-hover a:visited,
|
||||
.ui-state-focus a,
|
||||
.ui-state-focus a:hover,
|
||||
.ui-state-focus a:link,
|
||||
.ui-state-focus a:visited,
|
||||
a.ui-button:hover,
|
||||
a.ui-button:focus {
|
||||
color: #2b2b2b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-visual-focus {
|
||||
box-shadow: 0 0 3px 1px rgb(94, 158, 214);
|
||||
}
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active,
|
||||
a.ui-button:active,
|
||||
.ui-button:active,
|
||||
.ui-button.ui-state-active:hover {
|
||||
border: 1px solid #003eff;
|
||||
background: #007fff;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui-icon-background,
|
||||
.ui-state-active .ui-icon-background {
|
||||
border: #003eff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.ui-state-active a,
|
||||
.ui-state-active a:link,
|
||||
.ui-state-active a:visited {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-highlight,
|
||||
.ui-widget-content .ui-state-highlight,
|
||||
.ui-widget-header .ui-state-highlight {
|
||||
border: 1px solid #dad55e;
|
||||
background: #fffa90;
|
||||
color: #777620;
|
||||
}
|
||||
.ui-state-checked {
|
||||
border: 1px solid #dad55e;
|
||||
background: #fffa90;
|
||||
}
|
||||
.ui-state-highlight a,
|
||||
.ui-widget-content .ui-state-highlight a,
|
||||
.ui-widget-header .ui-state-highlight a {
|
||||
color: #777620;
|
||||
}
|
||||
.ui-state-error,
|
||||
.ui-widget-content .ui-state-error,
|
||||
.ui-widget-header .ui-state-error {
|
||||
border: 1px solid #f1a899;
|
||||
background: #fddfdf;
|
||||
color: #5f3f3f;
|
||||
}
|
||||
.ui-state-error a,
|
||||
.ui-widget-content .ui-state-error a,
|
||||
.ui-widget-header .ui-state-error a {
|
||||
color: #5f3f3f;
|
||||
}
|
||||
.ui-state-error-text,
|
||||
.ui-widget-content .ui-state-error-text,
|
||||
.ui-widget-header .ui-state-error-text {
|
||||
color: #5f3f3f;
|
||||
}
|
||||
.ui-priority-primary,
|
||||
.ui-widget-content .ui-priority-primary,
|
||||
.ui-widget-header .ui-priority-primary {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary,
|
||||
.ui-widget-header .ui-priority-secondary {
|
||||
opacity: .7;
|
||||
-ms-filter: "alpha(opacity=70)"; /* support: IE8 */
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-state-disabled,
|
||||
.ui-widget-content .ui-state-disabled,
|
||||
.ui-widget-header .ui-state-disabled {
|
||||
opacity: .35;
|
||||
-ms-filter: "alpha(opacity=35)"; /* support: IE8 */
|
||||
background-image: none;
|
||||
}
|
||||
.ui-state-disabled .ui-icon {
|
||||
-ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
|
||||
}
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ui-icon,
|
||||
.ui-widget-content .ui-icon {
|
||||
background-image: url("images/ui-icons_444444_256x240.png");
|
||||
}
|
||||
.ui-widget-header .ui-icon {
|
||||
background-image: url("images/ui-icons_444444_256x240.png");
|
||||
}
|
||||
.ui-state-hover .ui-icon,
|
||||
.ui-state-focus .ui-icon,
|
||||
.ui-button:hover .ui-icon,
|
||||
.ui-button:focus .ui-icon {
|
||||
background-image: url("images/ui-icons_555555_256x240.png");
|
||||
}
|
||||
.ui-state-active .ui-icon,
|
||||
.ui-button:active .ui-icon {
|
||||
background-image: url("images/ui-icons_ffffff_256x240.png");
|
||||
}
|
||||
.ui-state-highlight .ui-icon,
|
||||
.ui-button .ui-state-highlight.ui-icon {
|
||||
background-image: url("images/ui-icons_777620_256x240.png");
|
||||
}
|
||||
.ui-state-error .ui-icon,
|
||||
.ui-state-error-text .ui-icon {
|
||||
background-image: url("images/ui-icons_cc0000_256x240.png");
|
||||
}
|
||||
.ui-button .ui-icon {
|
||||
background-image: url("images/ui-icons_777777_256x240.png");
|
||||
}
|
||||
|
||||
/* positioning */
|
||||
/* Three classes needed to override `.ui-button:hover .ui-icon` */
|
||||
.ui-icon-blank.ui-icon-blank.ui-icon-blank {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-icon-caret-1-n { background-position: 0 0; }
|
||||
.ui-icon-caret-1-ne { background-position: -16px 0; }
|
||||
.ui-icon-caret-1-e { background-position: -32px 0; }
|
||||
.ui-icon-caret-1-se { background-position: -48px 0; }
|
||||
.ui-icon-caret-1-s { background-position: -65px 0; }
|
||||
.ui-icon-caret-1-sw { background-position: -80px 0; }
|
||||
.ui-icon-caret-1-w { background-position: -96px 0; }
|
||||
.ui-icon-caret-1-nw { background-position: -112px 0; }
|
||||
.ui-icon-caret-2-n-s { background-position: -128px 0; }
|
||||
.ui-icon-caret-2-e-w { background-position: -144px 0; }
|
||||
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
||||
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
||||
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
||||
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
||||
.ui-icon-triangle-1-s { background-position: -65px -16px; }
|
||||
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
||||
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
||||
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
||||
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
||||
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
||||
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
||||
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
||||
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
||||
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
||||
.ui-icon-arrow-1-s { background-position: -65px -32px; }
|
||||
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
||||
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
||||
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
||||
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
||||
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
||||
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
||||
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
||||
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
||||
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
||||
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
||||
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
||||
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
|
||||
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
||||
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
||||
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
||||
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
||||
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
||||
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
||||
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
||||
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
||||
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
||||
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
||||
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
||||
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
||||
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
||||
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
||||
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
||||
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
||||
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
||||
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
||||
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
||||
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
||||
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
||||
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
||||
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
||||
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
||||
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
||||
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
||||
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
||||
.ui-icon-extlink { background-position: -32px -80px; }
|
||||
.ui-icon-newwin { background-position: -48px -80px; }
|
||||
.ui-icon-refresh { background-position: -64px -80px; }
|
||||
.ui-icon-shuffle { background-position: -80px -80px; }
|
||||
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
||||
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
||||
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
||||
.ui-icon-folder-open { background-position: -16px -96px; }
|
||||
.ui-icon-document { background-position: -32px -96px; }
|
||||
.ui-icon-document-b { background-position: -48px -96px; }
|
||||
.ui-icon-note { background-position: -64px -96px; }
|
||||
.ui-icon-mail-closed { background-position: -80px -96px; }
|
||||
.ui-icon-mail-open { background-position: -96px -96px; }
|
||||
.ui-icon-suitcase { background-position: -112px -96px; }
|
||||
.ui-icon-comment { background-position: -128px -96px; }
|
||||
.ui-icon-person { background-position: -144px -96px; }
|
||||
.ui-icon-print { background-position: -160px -96px; }
|
||||
.ui-icon-trash { background-position: -176px -96px; }
|
||||
.ui-icon-locked { background-position: -192px -96px; }
|
||||
.ui-icon-unlocked { background-position: -208px -96px; }
|
||||
.ui-icon-bookmark { background-position: -224px -96px; }
|
||||
.ui-icon-tag { background-position: -240px -96px; }
|
||||
.ui-icon-home { background-position: 0 -112px; }
|
||||
.ui-icon-flag { background-position: -16px -112px; }
|
||||
.ui-icon-calendar { background-position: -32px -112px; }
|
||||
.ui-icon-cart { background-position: -48px -112px; }
|
||||
.ui-icon-pencil { background-position: -64px -112px; }
|
||||
.ui-icon-clock { background-position: -80px -112px; }
|
||||
.ui-icon-disk { background-position: -96px -112px; }
|
||||
.ui-icon-calculator { background-position: -112px -112px; }
|
||||
.ui-icon-zoomin { background-position: -128px -112px; }
|
||||
.ui-icon-zoomout { background-position: -144px -112px; }
|
||||
.ui-icon-search { background-position: -160px -112px; }
|
||||
.ui-icon-wrench { background-position: -176px -112px; }
|
||||
.ui-icon-gear { background-position: -192px -112px; }
|
||||
.ui-icon-heart { background-position: -208px -112px; }
|
||||
.ui-icon-star { background-position: -224px -112px; }
|
||||
.ui-icon-link { background-position: -240px -112px; }
|
||||
.ui-icon-cancel { background-position: 0 -128px; }
|
||||
.ui-icon-plus { background-position: -16px -128px; }
|
||||
.ui-icon-plusthick { background-position: -32px -128px; }
|
||||
.ui-icon-minus { background-position: -48px -128px; }
|
||||
.ui-icon-minusthick { background-position: -64px -128px; }
|
||||
.ui-icon-close { background-position: -80px -128px; }
|
||||
.ui-icon-closethick { background-position: -96px -128px; }
|
||||
.ui-icon-key { background-position: -112px -128px; }
|
||||
.ui-icon-lightbulb { background-position: -128px -128px; }
|
||||
.ui-icon-scissors { background-position: -144px -128px; }
|
||||
.ui-icon-clipboard { background-position: -160px -128px; }
|
||||
.ui-icon-copy { background-position: -176px -128px; }
|
||||
.ui-icon-contact { background-position: -192px -128px; }
|
||||
.ui-icon-image { background-position: -208px -128px; }
|
||||
.ui-icon-video { background-position: -224px -128px; }
|
||||
.ui-icon-script { background-position: -240px -128px; }
|
||||
.ui-icon-alert { background-position: 0 -144px; }
|
||||
.ui-icon-info { background-position: -16px -144px; }
|
||||
.ui-icon-notice { background-position: -32px -144px; }
|
||||
.ui-icon-help { background-position: -48px -144px; }
|
||||
.ui-icon-check { background-position: -64px -144px; }
|
||||
.ui-icon-bullet { background-position: -80px -144px; }
|
||||
.ui-icon-radio-on { background-position: -96px -144px; }
|
||||
.ui-icon-radio-off { background-position: -112px -144px; }
|
||||
.ui-icon-pin-w { background-position: -128px -144px; }
|
||||
.ui-icon-pin-s { background-position: -144px -144px; }
|
||||
.ui-icon-play { background-position: 0 -160px; }
|
||||
.ui-icon-pause { background-position: -16px -160px; }
|
||||
.ui-icon-seek-next { background-position: -32px -160px; }
|
||||
.ui-icon-seek-prev { background-position: -48px -160px; }
|
||||
.ui-icon-seek-end { background-position: -64px -160px; }
|
||||
.ui-icon-seek-start { background-position: -80px -160px; }
|
||||
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
|
||||
.ui-icon-seek-first { background-position: -80px -160px; }
|
||||
.ui-icon-stop { background-position: -96px -160px; }
|
||||
.ui-icon-eject { background-position: -112px -160px; }
|
||||
.ui-icon-volume-off { background-position: -128px -160px; }
|
||||
.ui-icon-volume-on { background-position: -144px -160px; }
|
||||
.ui-icon-power { background-position: 0 -176px; }
|
||||
.ui-icon-signal-diag { background-position: -16px -176px; }
|
||||
.ui-icon-signal { background-position: -32px -176px; }
|
||||
.ui-icon-battery-0 { background-position: -48px -176px; }
|
||||
.ui-icon-battery-1 { background-position: -64px -176px; }
|
||||
.ui-icon-battery-2 { background-position: -80px -176px; }
|
||||
.ui-icon-battery-3 { background-position: -96px -176px; }
|
||||
.ui-icon-circle-plus { background-position: 0 -192px; }
|
||||
.ui-icon-circle-minus { background-position: -16px -192px; }
|
||||
.ui-icon-circle-close { background-position: -32px -192px; }
|
||||
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
||||
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
||||
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
||||
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
||||
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
||||
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
||||
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
||||
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
||||
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
||||
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
||||
.ui-icon-circle-check { background-position: -208px -192px; }
|
||||
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
||||
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
||||
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
||||
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
||||
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
||||
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
||||
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
||||
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
||||
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
||||
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
||||
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
||||
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-left,
|
||||
.ui-corner-tl {
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-right,
|
||||
.ui-corner-tr {
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-left,
|
||||
.ui-corner-bl {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-right,
|
||||
.ui-corner-br {
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
background: #aaaaaa;
|
||||
opacity: .003;
|
||||
-ms-filter: Alpha(Opacity=.3); /* support: IE8 */
|
||||
}
|
||||
.ui-widget-shadow {
|
||||
-webkit-box-shadow: 0px 0px 5px #666666;
|
||||
box-shadow: 0px 0px 5px #666666;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,74 @@
|
||||
{
|
||||
"name": "jquery-ui",
|
||||
"title": "jQuery UI",
|
||||
"description": "A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.",
|
||||
"version": "1.13.2",
|
||||
"homepage": "http://jqueryui.com",
|
||||
"author": {
|
||||
"name": "jQuery Foundation and other contributors",
|
||||
"url": "https://github.com/jquery/jquery-ui/blob/1.13.2/AUTHORS.txt"
|
||||
},
|
||||
"main": "ui/widget.js",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Jörn Zaefferer",
|
||||
"email": "joern.zaefferer@gmail.com",
|
||||
"url": "http://bassistance.de"
|
||||
},
|
||||
{
|
||||
"name": "Mike Sherov",
|
||||
"email": "mike.sherov@gmail.com",
|
||||
"url": "http://mike.sherov.com"
|
||||
},
|
||||
{
|
||||
"name": "TJ VanToll",
|
||||
"email": "tj.vantoll@gmail.com",
|
||||
"url": "http://tjvantoll.com"
|
||||
},
|
||||
{
|
||||
"name": "Felix Nagel",
|
||||
"email": "info@felixnagel.com",
|
||||
"url": "http://www.felixnagel.com"
|
||||
},
|
||||
{
|
||||
"name": "Alex Schmitz",
|
||||
"email": "arschmitz@gmail.com",
|
||||
"url": "https://github.com/arschmitz"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/jquery/jquery-ui.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/jquery/jquery-ui/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "grunt"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8.0 <4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"commitplease": "3.2.0",
|
||||
"eslint-config-jquery": "3.0.0",
|
||||
"glob": "7.2.0",
|
||||
"grunt": "1.5.3",
|
||||
"grunt-bowercopy": "1.2.5",
|
||||
"grunt-cli": "1.4.3",
|
||||
"grunt-compare-size": "0.4.2",
|
||||
"grunt-contrib-concat": "1.0.1",
|
||||
"grunt-contrib-csslint": "2.0.0",
|
||||
"grunt-contrib-qunit": "5.1.1",
|
||||
"grunt-contrib-requirejs": "1.0.0",
|
||||
"grunt-contrib-uglify": "5.0.1",
|
||||
"grunt-eslint": "23.0.0",
|
||||
"grunt-git-authors": "3.2.0",
|
||||
"grunt-html": "14.5.0",
|
||||
"load-grunt-tasks": "5.1.0",
|
||||
"rimraf": "3.0.2",
|
||||
"testswarm": "1.1.2"
|
||||
},
|
||||
"keywords": []
|
||||
}
|
||||
Reference in New Issue
Block a user