2013-07-17 11 views
8

का उपयोग कर ActiveAdmin Reskinning मैं बूटस्ट्रैप टेम्पलेट थीम का उपयोग कर ActiveAdmin को फिर से त्वचा बनाना चाहता हूं। हालांकि मुझे पेज के लेआउट को सूट करने की जरूरत है।बूटस्ट्रैप

क्या मैं चाहता हूं कि ActiveAdmin के लेआउट को ओवरराइड करना संभव हो? यह सामान्य रेल सम्मेलनों से अलग दिखता है - मैं इसे नियमित टेम्पलेट का उपयोग करके बस पूरा करूँगा और फिर उस सामग्री के उन हिस्सों को उपज दूंगा जो मुझे चाहिए ताकि मुझे उनकी आवश्यकता हो।

उत्तर

10

मैंने पहले कुछ ऐसा किया था। इस सार की जाँच करें https://gist.github.com/bigfive/6017435

अनिवार्य रूप से आप अपने active_admin_reskin लेआउट में अपने :determine_active_admin_layout विधि अधिभावी

# config/initializers/active_admin_patch.rb 
module ActiveAdmin 
    class BaseController 
    def determine_active_admin_layout 
     'active_admin_reskin' 
    end 
    end 
end 

तो फिर तुम तो

तरह Arbre view_factory पर तरीकों कॉल कर सकते हैं करके अपने नए लेआउट का उपयोग करने के लिए सक्रिय व्यवस्थापक आधार नियंत्रक पैच
view_factory[#{params[:action]}_page"].new(Arbre::Context.new(assigns, self)).send(:build_header) 

गीस्ट (https://gist.github.com/bigfive/6017435) में मैंने उन तरीकों को कॉल करना आसान बनाने के लिए थोड़ा सा दृश्य बनाया। https://github.com/gregbell/active_admin/blob/master/lib/active_admin/views/pages/base.rb

एक बार मार्कअप को अपनी इच्छानुसार बदल गया है, तो आप अपने active_admin.css.scss में कर सकते हैं @include 'bootstrap':

सक्रिय व्यवस्थापक स्रोत कोड के माध्यम से एक नज़र जो तरीकों विशेष रूप से यहां विभिन्न Arbre दस्तावेजों पर आप के लिए उपलब्ध हैं, को देखने के लिए है फ़ाइल जेनरेटर बनाया और पागल हो जाओ।

+0

मुझे यकीन नहीं है कि आपका पैच कैसे काम करता है, क्या आप इसका उपयोग करने के बारे में कुछ स्पष्ट विचार दे सकते हैं? अब तक, @import "बूटस्ट्रैप"; active_admin.css.scss में बूटस्ट्रैप दिखता है और महसूस करता है। क्या आप कुछ निर्देशक दिशानिर्देश दे सकते हैं? धन्यवाद। – Axil

+0

पैच 'activ_admin_reskin' स्ट्रिंग को वापस करने के लिए उस विधि को ओवर-राइड करके सक्रिय एडमिन काम करता है जिस तरह से पैच बदलता है। इसे पहली पंक्ति पर टिप्पणी में वर्णित पथ पर सहेजें। फिर आप ऐप/व्यू/लेआउट/active_admin_reskin.html.erb में ऐसा लेआउट (केवल एक नियमित रेल लेआउट) बनाते हैं, तो उस लिंक को देखें जो @BigFive से जुड़ा हुआ है। – nocache

+0

मुझे कम बूटस्ट्रैप मणि के साथ इसे लागू करने में समस्याएं थीं। SASS मणि में स्थानांतरित होने पर ठीक काम किया और जोड़ा: @ आयात "बूटस्ट्रैप-स्पॉकेट्स"; @ आयात "बूटस्ट्रैप"; active_admin.css.scss में – Seoman

0

आप जिस एए का उपयोग कर रहे हैं उसके आधार पर निर्भर करता है।

(0.6.0 < प्रतिबद्ध: ec9996406df5c07f4720eabc0120f710ae46c997):

अपने एससीएसएस शामिल करें, लेकिन body.active_admin समूह में अपने सीएसएस चयनकर्ताओं को संपुटित। इसके अलावा, विशिष्टता महत्वपूर्ण है, इसलिए यदि आप एए की डिफ़ॉल्ट स्टाइल को ओवरराइड करना चाहते हैं, तो आपको यह सुनिश्चित करने की आवश्यकता हो सकती है कि आप इच्छित व्यवहार प्राप्त करने के लिए पूर्ण चयनकर्ता को ओवरराइड कर रहे हैं।

यदि आप इन शैलियों को ओवरराइड करने के लिए इन शैलियों को ढूंढना चाहते हैं, तो यह देखने के लिए कि वे साइट को शैली कैसे डिफ़ॉल्ट करते हैं, AA's stylesheets पर एक नज़र डालें। एए स्टाइलशीट शामिल होने के बाद बस अपनी कस्टम स्टाइल शामिल करें।

बाद प्रतिबद्ध: ec9996406df5c07f4720eabc0120f710ae46c997

स्टाइलशीट का नेमस्पेसिंग हाल ही में हटा दिया गया है, और मैं throroughly अभी तक निहितार्थ परीक्षण नहीं किया।

+1

यह स्टाइल करने का एक अच्छा तरीका प्रतीत होता है, लेकिन मैं वास्तव में उत्पादित मार्कअप को संशोधित करना चाहता हूं। अकेले सीएसएस ऐसा करने के लिए पर्याप्त नहीं है जो मुझे करना है। – nocache

0

BigFive के स्वीकार किए जाते हैं जवाब शुरुआत में मेरे लिए काम किया है, लेकिन फिर कुछ कीड़े का उत्पादन किया जब कस्टम आंशिक प्रतिपादन या जब रूपों में त्रुटियों प्रतिपादन ।

उनके दृष्टिकोण से प्रेरित मैंने एए को गतिशील रूप से लेआउट उत्पन्न करने के लिए उपयोग की जाने वाली व्यक्तिगत विधियों को ओवरराइड करने के लिए स्विच किया (क्योंकि एए एक स्थिर लेआउट फ़ाइल का उपयोग नहीं करता है जिसे आसानी से संशोधित किया जा सकता है)।

आप स्रोत कोड में उपलब्ध विधियां पा सकते हैं, लेकिन यह सुंदर आत्म-व्याख्यात्मक है और html element में शुरू होता है।

उदाहरण:

कुछ वर्गों को जोड़ने और पुनर्निर्माण के लिए तत्वों:

आप में अपनी शैली रख सकते हैं:

संपत्ति/स्टाइलशीट/active_admin.css.scss

और अपने html विवरण:

कॉन्फ़िगर/प्रारंभकर्ता/active_admin_patch.rb:

module ActiveAdmin 
    module Views 
    class Header 

     alias_method :original_build_site_title, :build_site_title 
     alias_method :original_build_global_navigation, :build_global_navigation 
     alias_method :original_build_utility_navigation, :build_utility_navigation 

     def build_site_title 
     div class: "side_bar_top" do 
      original_build_site_title 
     end 
     end 

     def build_global_navigation 
     div class: "side_bar_content" do 
      original_build_global_navigation 
     end 
     end 

     def build_utility_navigation 
     div class: "side_bar_footer" do 
      original_build_utility_navigation 
     end 
     end 
    end 

    module Pages 
     class Base 

     alias_method :original_build, :build 

     # This should be the same as add_classes_to_body but for the html main element 
     def add_classes_to_html_tag 
      document.add_class(params[:action]) 
      document.add_class(params[:controller].gsub('/', '_')) 
      document.add_class("active_admin") 
      document.add_class("logged_in") 
      document.add_class(active_admin_namespace.name.to_s + "_namespace") 
     end 

     def build(*args) 
      original_build 
      add_classes_to_html_tag 
     end 

     def build_page 
      within @body do 
      div id: "wrapper" do 
       div id: "details_view" do 
       build_title_bar 
       build_page_content 
       #build_footer 
       end 
       div id: "master_view" do 
       build_header 
       end 
      end 
      end 
     end 
     end 
    end 
    end 
end